SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member novice-designer's Avatar
    Join Date
    Aug 2004
    Location
    here
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy This (my) page appears different in different browsers

    ok ill make this short. You just need FireFox and Explorer to see what im talking about (because i only tested the page under those two browsers).

    my question is as simple as this ... why the hell isn't the page looking the same in both broswers?? here's the basic layout in HTML along with the CSS code to see it by your-self , with comments on the HTML page :

    CSS source file :
    Code:
    #container {
    	width: 760px;
    	position:absolute;
    	left:50%;
    	margin-left:-380px;
    }
    
    #banner {
    	border : 1px solid black;
    	padding: 5px;
    	margin-bottom: 20px;
    	margin-top : 20px;
    	height : 95px
    }
    
    
    
    #content {
    	padding: 5px;
    	margin-left: 150px;
    	margin-right: 110px;
    	background-color: white;
    	width : 485px;
    	height : 800px
    }
    
    #content div.box {
    	padding : 10px;
    	border : 1px solid black;
    	margin : 15px 0px 20px 0px;
    	height : 735px;
    	}
    
    #content ul {
    	margin-top : 0px;
    	list-style-type : square;
    	}
    
    #content p.announce {
    	text-align : center;
    	font-family : arial;
    	font-size : 15;
    	font-weight : bold;
    	border : ridge black;
    	color : red;
    	margin : 0;
    	padding : 0;
    	}
    
    
    #sidebar-a {
    	position : relative;
    	float: left;
    	width: 140px;
    	border-right : 1px solid;
    	margin: 0;
    	margin-right: 5px;
    	padding: 0px;
    	background-color: beige;
    	height : 800px;
    	text-align : center;
    }
    
    
    #sidebar-a p {
    	font-family : sans-serif;
    	color:black;
    	border : 1px solid black;
    	width : 50%;
    	padding : 3;
    	font-size : 10px;
    	font-weight : bold;
    	margin-top : 20px;
    	margin-bottom : 15px
    }
    
    #sidebar-a ul{
    	margin : 0px;
    	padding : 0;
    }
    
    #sidebar-a li{
    	list-style-type: none;
    	background-position : center center;
    	margin : 0;
    	padding : 0;
    	width : 120px;
    	height : 30px;
    	text-align : center;
    }
    
    #sidebar-a a {
    	width:100%;
    	height:25px;	
    	border : 1px solid black;
    	line-height:25px;
    	display : block;
    	text-decoration: none;
    	background-color : white;
    	margin : 0;
    	padding : 0px;
    	font-family : sans-serif;
    	color : black;
    	text-align: center
    }
    
    #sidebar-a a:hover {
    	width:100%;
    	height:25px;
    	line-height:25px;
    	display : block;
    	text-align:center;
    	text-decoration: none;
    	background-color : beige;
    	margin : 0;
    	font-family : sans-serif;
    	color : black;
    }
    
    #sidebar-b {
    	position : relative;
    	float: right;
    	width: 100px;
    	margin: 0;
    	margin-left: 5px;
    	padding: 5px;
    	background-color: beige;
    	height : 800px;
    }
    
    
    #footer {
    	clear: both;
    	padding: 5px;
    	margin-top: 10px;
    	border-top : 1px solid black;
    	font-weight:bold;
    	text-align:center;
    	background-color: white;
    }
    HTML page :
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="source.css"
    </head>
    
    <body>
    	<div id="container">
    		<div id="banner">the top margin of this banner looks 
    
    greater than 20px in explorer (or maybe less in firefox)
    		</div>
    
    		<div id="sidebar-a"><center>
    		<p>Navigation</p>
    		<ul>
    			<li><a href="#">Link</a></li>
    			<li><a href="#">Link</a></li>
    			<li><a href="#">Link</a></li>
    			<li><a href="#">Link</a></li>
    			<li><a href="#">Link</a></li>
    		<br /><br />
    		the space between links looks greater in Explorer , 
    
    also the navigation border width looks greater in firefox.
    		</ul>
    		
    
    		</center>
    		</div>
    
    		<div id="sidebar-b">
    		this bar looks larger in FireFox than explorer	
    		</div>
    
    		<div id="content">
    		
    <p class="announce">See how this border differ in FireFox and 
    
    explorer</p>
    
    		<div class="box">
    		this box looks shorter in explorer
    		</div>
    
    		</div>
    
    		<div id="footer">
    		<center><b>whatever</b></center>
    		</div>
    	</div>
    </body>
    </html>

    pleaaaase i need your help , my site has been waiting for ages in my computer and i can't release it like this...

    appreciate your help...

  2. #2
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possible to see the site?
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  3. #3
    SitePoint Enthusiast Restless's Avatar
    Join Date
    Aug 2004
    Location
    Austria
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Possibility
    Is it possible to see the site?
    im bored so I did it for him:
    html link


    now im taking a look at the code, but I dont think "I" can figure it out.
    Restless Sadja,
    - a good girl
    sometimes. not always. rarily.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The first thing you should do is read the faq sticky thread about the broken box model in ie.

    That should fix most of your problems.

    Once you've done that and made the changes and updated your page then we can take another look to see what else needs to be done

    paul

  5. #5
    SitePoint Member novice-designer's Avatar
    Join Date
    Aug 2004
    Location
    here
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks restless for uploading my page. I thought you guys wanted the code only.

    Paul :
    are you saying that the IE isn't displaying the page as it should?? like the whole problem from IE only??

  6. #6
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at the sticky threads. All browsers display the html you create slightly differently. And in the case of iE5.5 it all went very odd for a while.
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    are you saying that the IE isn't displaying the page as it should
    Thats an understatement lol

    The FAQ should explain it but heres a quick example.

    This bit of your code:
    Code:
    #content {
    	padding: 5px;
    	margin-left: 150px;
    	margin-right: 110px;
    	background-color: white;
    	width : 485px;
    	height : 800px
    }
    In IE the padding is added on the inside of the width thus reducing the content area available for display. In the correct box model padding and borders are added to the elements dimensions thus preserving the stated width/height of the content area.

    So Ie makes the element 485px x 800px
    All other browsers make it 495px x 810px

    Therefore you need to either add the padding on an inner element that has no width specified or use one of the methods mentioned in the sticky thread. The method used for ie6 depends on whether you are working in standards or quirks mode so read the faq as it explains it all.

    Also note that all browsers render elements default margins and padding differently so you also need to control these explicitly. e.g. p {margin:5px 0} h1 {margin:0} etc.

    Hope that explains it a bit more.

    Paul

  8. #8
    SitePoint Member novice-designer's Avatar
    Join Date
    Aug 2004
    Location
    here
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup .. explains alot. 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
  •