deldalton Posted November 20, 2012 Share Posted November 20, 2012 Hi, I've run into an issue, while building an HTML site, that I would have thought would have a simple answer but I'm struggling to find it and I was hoping someone on here would be able to help guide me to the answer. The website currently only has two divs. The first div, the one we're interested in, has two images in it seperated by a break (<br>) so that the second image is below the first. The second image is a picture of some tabs. These tabs line up with the background to look as though they're incorporated into it. When the page is viewed in Internet Explorer it's perfect. However, when viewed in Chrome or Firefox the tabs appear to be 1 pixel lower, leaving an unwanted white gap between the tabs and the headers background. I have attached two files to help explain what I mean. The first image, "Capture.PNG", is how the page previews in IE. The second image, "Capture2.PNG", is how the page previews in Chrome and in Firefox. The code I am currently using is below. <!DOCTYPE html><html><head><title>This is the title of the page</title><style type="text/css"> body { background-image:url(/images/header.png); background-repeat:repeat-x; margin:0; padding:0;} IMG.displayed { display: block; margin-left: auto; margin-right: auto;}</style></head> <body><div id="header" style="width:1000px;height:146px;margin:0 auto;"><img src="/images/logo.png" style="height:146px;width:500px;margin-top:0px;"><br><img src="/images/headertabs.png" style="height:30px;width:375px;margin-top:0px;margin-left:100px;"></div> <div id="container" style="width:800px;height:500px;margin:0 auto;"></div> </body> </html> Can anyone explain to me why the page looks different in other browsers? I've set the margins to 0px, so they shouldn't have any affect now. If there are any alternative methods, I would be grateful to hear those too. Many thanks, in advance. Link to comment Share on other sites More sharing options...
Ingolme Posted November 20, 2012 Share Posted November 20, 2012 The <br> element is probably the cause of this problem. You can never predict how much vertical space a <br> element will take up, it's used to separate lines of text, not for page layout. Instead of <img> elements you should use the background-image property and use a different element. Besides that, inline elements leave a bit of space below them for letters that go below the baseline like y or g. Link to comment Share on other sites More sharing options...
deldalton Posted November 20, 2012 Author Share Posted November 20, 2012 The <br> element is probably the cause of this problem. You can never predict how much vertical space a <br> element will take up, it's used to separate lines of text, not for page layout. Instead of <img> elements you should use the background-image property and use a different element. Hi Ingolme. Thanks for the response. I've removed the <br> element and instead placed a transparent image in it's place, to fill the rest of the gap on that line. This then forces the tabs to appear below the logo because it cannot fit beside them in the div. However, this produces the same results. The gap between the tabs and the header background still appears in the Firefox and Chrome browsers. I attempted to use the "background-image" property within a div but that hasn't worked at all. Does this need to be applied to a div using CSS? Link to comment Share on other sites More sharing options...
deldalton Posted November 20, 2012 Author Share Posted November 20, 2012 (edited) Okay, so what I've done is create a div "container". This container has two divs within it. The first div within the container has the first image within it. The second div, within the container, has the second image in it. And this has resolved the issue. <body><div id="container" style="width:1000px;height:500px;margin:0 auto;"><div id="header" style="width:900px;height:150px;margin:0 auto;"><img src="/images/logo.png" style="height:146px;width:500px;margin-top:0px;"></div><div id="headertabs" style="width:800px;height:30;"><img src="/images/headertabs.png" style="height:30px;width:375px;margin-top:0px;margin-left:100px;"></div></div> Whether this resolution is considered best practice, I don't know? I'm happy with it but if anyone can suggest alternatives or a "better" way to do this it would be great. Many thanks. Edited November 21, 2012 by deldalton Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now