Layout differences across browsers

**Evoken** · Apr 6, 2009 09:59

Greetings

I've been trying to learn CSS and when I am not working what I do is to make personal exercises to explore new ideas and challenge myself to do things and learn more about CSS and how it works.

I was doing fine with this site (it is not for a client it is more like a personal thing) but when I previewed in different browser I note some differences. The page looks as it should on FF3 and Safari 3 (albeit with a slight difference in the font size) but when I preview it on IE 7 some of the elements move out of place: the two angels on the sides move down and the nav bar on top moves up. In Opera 9 it gets even worse.

Here is alink to the site and the css:

Site

Style

So, what am I doing wrong here or do I need some fix/hack for these browsers? As I said, I am still learning so any input is highly appreciated. Again, don't mind the content, this is just a personal excersise, who knows tho...it may end up as a fan site

Regards,

**RyanReese** · Apr 6, 2009 10:27

You are running into a pretty big case of collapsing margins.

1) You don''t need a huge bottom padding on container...
2) On #section you have clear:both;margin-top:100px;. That alone triggers collapsing margins and which is why Opera is screwed up
3) I made all the changes in red
4) And finally the angels need their offset recalculated.

Code:

<!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>
<base href="http://csstest.netii.net/virginblack2.html" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Virgin Black Official Website</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>

<body>


<!-- navigation -->


<div id="container" style="padding:0;">
	
	<h1>Virgin Black Official Website</h1>
	
	<div id="nav">
		<ul id="navi">
			<li id="download"><a href="#">Downloads</a></li>
			<li id="disco"><a href="#">Discography</a></li>
			<li id="gallery"><a href="#">Gallery</a></li>
			<li id="bio"><a href="#">Bio</a></li>
		</ul>
	</div>
		
<!-- section content -->
		
		
	<div id="section" style="padding-top:1px;"><img src="images/groupict.jpg" alt="groupict" width="394" height="282" class="grouppict" />
		<h3>Band Biography</h3>
		<p id="biotext"><span class="subtitle">Subtitle...</span> <br />
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo neque ut nisi. Donec lorem. Suspendisse potenti. Vivamus pretium tellus ac magna. Proin enim massa, luctus nec, sodales vitae, feugiat sed, enim.
		<br /><br />
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo neque ut nisi. Donec lorem. Suspendisse potenti. Vivamus pretium tellus ac magna. Proin enim massa, luctus nec, sodales vitae, feugiat sed, enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at ligula vel erat dictum volutpat.</p>
	</div>


<!-- album promo -->


	
	<div id="fortissimo">
		<img src="images/fortissimo.jpg" alt="fortissimo" width="139" height="139" class="fortissimo"/>
		<p><span class="subtitle">Requiem Fortissimo</span><br />
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo neque ut nisi.</p>
		<img src="images/forte.jpg" alt="forte" width="139" height="139" class="forte"/>
		<p><span class="subtitle">Requiem Mezzo Forte</span><br />
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo neque ut nisi.</p>
	
		<div id="form">
			<form id="subscribe" action=""><p><span class="subtitle">Form title...</span><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo neque ut nisi.<br />
				email
				<textarea id="field" cols="18" rows="1"></textarea>
				<button id="subsbtn" onclick="#" title="submit">Submit</button></p>
			</form>
		</div>
	
	</div>

<!-- news section -->


	<div id="news" style="float:left;">
		<div id="lnews">
			<p id="newstitle">Latest News</p>
			<p id="newstext"><span class="subtitle">Title...</span><br />
			<img src="images/concert.jpg" alt="concert" width="150" height="100"/><br />
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo neque ut nisi. Donec lorem. Suspendisse potenti. Vivamus pretium tellus ac magna. Proin enim massa, luctus nec, sodales vitae, feugiat sed, enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at ligula vel erat dictum volutpat.<br /><br />
			<img id="separator" src="images/separator.png" alt="separator" width="201" height="9"/>
			<span class="subtitle">Title...</span><br />
			<img src="images/concert-2.jpg" alt="concert-2" width="150" height="100"/><br />
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo neque ut nisi. Donec lorem. Suspendisse potenti. Vivamus pretium tellus ac magna. Proin enim massa, luctus nec, sodales vitae, feugiat sed, enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at ligula vel erat dictum volutpat.</p>
		</div>
		
		<div id="onews">
			<p id="gigstitle">Concerts and Gigs</p>
			<p id="oldnews"><span class="subtitle">Date - Title...</span><br />
			Lorem ipsum dolor sit amet, elit.<br /><br />
			<span class="subtitle">Date - Title...</span><br />
			Lorem ipsum dolor sit amet, elit.<br /><br />
			<span class="subtitle">Date - Title...</span><br />
			Lorem ipsum dolor sit amet, elit.</p>
			<img class="separator" src="images/separator.png" alt="separator" width="201" height="9"/>
		</div>
	</div>

	<img id="angel" style="top:-1070px;" src="images/angel.png" alt="angel" width="163" height="393"/>
	<img id="angel2" style="top:-1070px;" src="images/angel-2.png" alt="angel-2" width="237" height="412"/>

</div>

</body>
</html>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Code -->

**Evoken** · Apr 6, 2009 15:06

Thanks for the info...I'll try that out when I get back

**RyanReese** · Apr 6, 2009 15:09

Ok, I tried it out myself so it should work.

**Evoken** · Apr 7, 2009 03:48

Well, it does seems to work with Opera now, but a strange thing that is happening in Opera is that when I first load the page it displays things out of place but if I hit refresh it shows fine. It also happens if I change the size of the window, when I make it bigger or smaller, it breaks the layout but if I hit refresh, it is fixed.

Opera bug? Here is the link to the site

http://evo.netii.net/virginblack2.html

Thanks again for the tip RyanReese. I think I'll have to expand my knowledge of the box model.

**RyanReese** · Apr 7, 2009 09:11

Sorry but I don't see that on my Opera.

(This won't fix anything)
Add *{margin:0;padding:0;} to the top of your CSS.

**Evoken** · Apr 7, 2009 10:00

Originally Posted by RyanReese

Sorry but I don't see that on my Opera.

(This won't fix anything)
Add *{margin:0;padding:0;} to the top of your CSS.

Just did...same link above. It seems to have moved everything up.

**RyanReese** · Apr 7, 2009 10:08

It resets the browser margins and paddings. It basically gives you freeway...it should actually produce more pixel perfect results. Always start with a reset at the top of your page (don't stickwith that one as form elements suffer) use Eric Meyers reset

**Evoken** · Apr 7, 2009 10:20

I see, that should bring about a more consistent look across browsers. I'll try it later when I get back home. I guess I will have to re-adjust the position/margin/padding of all elements.

Thanks again.

**RyanReese** · Apr 7, 2009 10:24

No you shouldn't, what a reset does is if it DOESN'T have a set margin / padding explicitly set, it will reset it to 0. If you set something that will be used instead of 0.

**Evoken** · Apr 7, 2009 17:35

Well Meyer's reset sure helped, thanks for sharing it. I did need to change a couple of things to get the layout right after that. Some adjusting of the padding/margins were needed on the elements to compensate for the change brought about by the reset. But...it now looks nearly identical on FF3, Safari 3, Opera 9 and IE 7. There is only a tiny difference due to the different font renderings but it is rather insignificant.

The only one that has a small issue still is IE 7. For some reason the heading for the form (Mailing list) is indexed to the right and aligned with the two Requiem titles above it. Not sure why that is as it works fine in the other three browsers.

Here is the link again and a screenshot of how it is supposed to look like:

http://evo.netii.net/virginblack2.html

Thanks again for the help RyanReese! Really appreciated.

**RyanReese** · Apr 8, 2009 06:07

Your welcome

.

Add clear:both; to #form

**Evoken** · Apr 8, 2009 17:28

That did work, thanks! But I had to apply clear:both to the Mailing List text itself which is within a <span> with a style. Then I had to adjust a bit the angels again (what is it with them wanting to fall down all the time!

) But it is all right now.

Let's see where it goes from there...

**Evoken** · Apr 8, 2009 20:57

Sure, thanks for the help!

User Tag List

Thread: Layout differences across browsers

Thread Tools

Display

Layout differences across browsers

Bookmarks

Bookmarks

Posting Permissions