SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout differences across browsers

    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,

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    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 -->
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info...I'll try that out when I get back

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Ok, I tried it out myself so it should work.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Your welcome .

    Add clear:both; to #form
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, thanks for the help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •