-
1. Re: Wrapper Back Ground image is not ligning up with the footer BG image on mobile
martcol Feb 6, 2012 10:29 AM (in response to nexgenVP)nexgenVP wrote:
stylingwith CSS.
<div id="wrapper">
<div id="footer"> </div>
</div>
I don't think that is enough information.
Can you post a link to your site/page?
Martin
-
2. Re: Wrapper Back Ground image is not ligning up with the footer BG image on mobile
nexgenVP Feb 6, 2012 12:21 PM (in response to martcol)Thanks for getting back to me. I'm using android incredible, if that helps any.
http://www.nexgenproductions.com/adobe_test/
I'm assuming you can find my code, if not let me know and i can post.
-
3. Re: Wrapper Back Ground image is not ligning up with the footer BG image on mobile
martcol Feb 6, 2012 12:43 PM (in response to nexgenVP)I'm sorry but I'm not at my PC now but did manage to find a parse error in your CSS here:
/*reset browser defaults*/
h1, h2, h3, p, div, ul, li, img {
margin: 0;
padding 0:
}
You have used a colon instead of a semi colon. That's worth changing.
Having said that, and not withstanding use of an iPhone to look, I'm still not too sure if your problem.
Maybe another pair of eyes will be better?
Good luck
Martin
-
4. Re: Wrapper Back Ground image is not ligning up with the footer BG image on mobile
Nancy O. Feb 6, 2012 1:40 PM (in response to nexgenVP)Instead of using 3 background-images, you have considered using CSS border-radius for this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> html {font-size: 100%;} body { background: #006699; text-align: center; font-family: Verdana, Geneva, sans-serif; font-size: 16px; color: #000; } #wrapper { background-color: #333; width: 50em; margin:0 auto; padding: 1.25em; } .rounded { width: 31.25em; margin:0 auto; padding:1.25em; background-color: #9D9D9D; color:brown; -webkit-border-radius: 10px; -webkit-border-bottom-left-radius: 100px; -moz-border-radius: 10px; -moz-border-radius-bottomleft: 100px; border-radius: 10px; border-bottom-left-radius: 100px; } </style> </head> <body> <div id="wrapper"> <div class="rounded"> <h1>Here is some content inside a .rounded container</h1> <!--end .rounded --></div> <!--end #wrapper --></div> </body> </html>Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
-
5. Re: Wrapper Back Ground image is not ligning up with the footer BG image on mobile
nexgenVP Feb 7, 2012 6:43 AM (in response to nexgenVP)Thanks Matin and Nancy,
Martin thanks for grabbing that code error.
Nancy, this is an excellant workaround if i can't get my problem fixed.
-
6. Re: Wrapper Back Ground image is not ligning up with the footer BG image on mobile
osgood_ Feb 7, 2012 7:26 AM (in response to nexgenVP)nexgenVP wrote:
this is an excellant workaround if i can't get my problem fixed.
Just remember that radius border is not supported in IE8 or a range of other older browsers that people might be using. Of course it's entirely up to the indiviidual to decide when they stop supporting 'older' browsers.
Personally I like my design to look the same in all browsers so at the moment I still use images for corners.
-
7. Re: Wrapper Back Ground image is not ligning up with the footer BG image on mobile
nexgenVP Feb 8, 2012 6:59 AM (in response to osgood_)osgood,
I figured i would have some browser isuues with that. I'm still wrenching away on the images. I really hope I can find a slution soon!
Thanks for the tip.
-
8. Re: Wrapper Back Ground image is not ligning up with the footer BG image on mobile
osgood_ Feb 8, 2012 7:14 AM (in response to nexgenVP)Cut it back to the basics and test. Copy code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test for Adobe Forums</title>
<style type="text/css">
body {
background: #006699;
font-family: Verdana, Geneva, sans-serif;
font-size: 101%;
color: #000;
margin: 0;
padding: 0;
}
#wrapper {
background: url(images/wrapper_middle.gif) repeat-y;
width: 854px;
margin: 0px auto;
}
/*Main Navigation*/
#mainNav {
background: url(images/mainNavBG.gif) no-repeat;
height: 40px;
}
#mainContent p{
padding: 3px 35px 0 35px;
color: #542501;
}
/*Footer*/
#footer {
background: url(images/footerBG.gif) no-repeat;
height: 121px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="mainNav">
</div><!--mainNav-->
<div id="mainContent">
<p>This part of the wrapper is where i am having issues</p>
</div><!--mainContent-->
<div id="footer">
</div><!--footer-->
</div><!--wrapper-->
</body>
</html>
-
9. Re: Wrapper Back Ground image is not ligning up with the footer BG image on mobile
nexgenVP Feb 8, 2012 7:44 AM (in response to osgood_)Osgood,
I posted and still messed up. It doesn't make since to me at all. It's perfect on a desktop.
Thanks for the help
-
10. Re: Wrapper Back Ground image is not ligning up with the footer BG image on mobile
osgood_ Feb 9, 2012 3:44 AM (in response to nexgenVP)nexgenVP wrote:
I posted and still messed up. It doesn't make since to me at all. It's perfect on a desktop.
Thanks for the help
I guess the mobile device is not going to play ball then because the code is WC3 compliant, in its simplest form and can't be stripped back any further short of dumping a complete image on the page.
I don't know enough about mobile device rendering of pages to offer further assistance



