Jump to content
l2oBiN

Looks Good In Safari, But Not In Firefox?

Recommended Posts

Hello. I am not sure if this is the right subforum for this post. I am having trouble with establishing a row layout for a website. It looks as I want it to in Safari, but not in Firefox or the DW preview. Could someone point out the reason?

<!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>Untitled Document</title><style type="text/css"><!--body {	font: 80% Verdana, Arial, Helvetica, sans-serif;	background: #666666;	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */	color: #000000;}#container {	/* the code below will center the #container to the middle of the browser, it has been obtained from [url="http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm"]http://www.infinitywebdesign.com/research/...centereddiv.htm[/url] */	position:absolute;	top:50%;	left:50%;	height:600px;	width: 960px;  /* this will create a container 960px wide */	margin-top: -300px; /*set to a negative number 1/2 of your height*/	margin-left: -480px; /*set to a negative number 1/2 of your width*/	/* the above below will center the #container to the middle of the browser, it has been obtained from [url="http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm"]http://www.infinitywebdesign.com/research/...centereddiv.htm[/url] */		background: #FFFFFF;	border: 1px solid #000000; 	}#header {	height:60px;	background: #DDDDDD; 	padding: 0 5px 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may    want to remove the padding.  the current setting is written in shorthand, it can be viewed here [url="http://www.w3schools.com/css/css_padding.asp"]http://www.w3schools.com/css/css_padding.asp[/url], and it means 0top, 5px right and 10px 	    left*/	}	#header h1 {		margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, 	        this is not necessary as that also avoids the margin collapse */	}#navigation {	height:25px;	padding: 0 5px 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may    want to remove the padding. */	background: #00FF00;}#mainContent {	height:500px;	padding: 0 5px 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */	background: #FFFFFF;}#footer {	height:15px;	padding: 0 5px 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */	background-color:#00FF00;		} 	#footer p {		font: 80% Verdana, Arial, Helvetica, sans-serif;		margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */--></style></head><body><div id="container"><!--===============================================================================Start #container-->      <div id="header"><!--------------------------------------------------------------------- #header -->    <h1>Header</h1></div> <!--------------------------------------------------------------------------- end #header --><div id="navigation"><!------------------------------------------------------------- #navigation -->    navigatio</div> <!----------------------------------------------------------------------- end #navigation --><div id="mainContent"><!----------------------------------------------------------- #mainContent -->    <h1> Main Content</h1>    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test testtest test test test test test test test test test test test test test test test test test test test test test test test test test test test test test testtest test test test test test test test test test test test test test test test test test test test test test test test test test test test test test testtest test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</div><!----------------------------------------------------------------------- end #mainContent --><div id="footer"><!--------------------------------------------------------------------- #footer -->    <p>Footer</p></div><!---------------------------------------------------------------------------- end #footer --></div><!--=============================================================================================== end #container--></body></html>

Share this post


Link to post
Share on other sites

What is a "row layout"?If something works in Safari and not in Firefox, is must be taking advantage of some Safari bug to be working.

Share this post


Link to post
Share on other sites
What is a "row layout"?
I have a centred div container which has four divs in it and I would like it to be like a sandwich within the container. ie top = div for site heading, second a navigation row, third the main content area and finally a tiny footnote with copyright info.
If something works in Safari and not in Firefox, is must be taking advantage of some Safari bug to be working.
How can I chase it down? i have rand the code through dreamweaver and it tells me there is no cmpatibility issues between browsers. When I open the code in Safari or in Opera there is no problem however I get a problem in Firefox. I dont understand why. Is it the way I have arranged the divs with CSS ?

Share this post


Link to post
Share on other sites

have you tried running your code through the w3 validators (for CSS/HTML). In the past, Ingolme has recommended the use of strict doctypes to produce more stable results over multiple browsers.

Share this post


Link to post
Share on other sites
have you tried running your code through the w3 validators (for CSS/HTML). In the past, Ingolme has recommended the use of strict doctypes to produce more stable results over multiple browsers.
Ok Got t the root of the bloody problem after painstaking deduction! It was my commenting! I never would have guessed it. "from http://htmlhelp.com/reference/wilbur/misc/comment.htmlThere is also the problem with the "--" sequence. Some people have a habit of using things like "<!-------------->" as separators in their source. Unfortunately, in most cases, the number of "-" characters is not a multiple of four. This means that a browser who tries to get it right will actually get it wrong here and actually hide the rest of the document. For this reason, use the following simple rule to compose valid and accepted comments: An HTML comment begins with "<!--", ends with "-->" and does not contain "--" or ">" anywhere in the comment. Let that be a lesson to all other newbies like myself!

Share this post


Link to post
Share on other sites
I have a centred div container which has four divs in it and I would like it to be like a sandwich within the container. ie top = div for site heading, second a navigation row, third the main content area and finally a tiny footnote with copyright info.How can I chase it down? i have rand the code through dreamweaver and it tells me there is no cmpatibility issues between browsers. When I open the code in Safari or in Opera there is no problem however I get a problem in Firefox. I dont understand why. Is it the way I have arranged the divs with CSS ?
did you try to use the Firebug to debug ?

Share this post


Link to post
Share on other sites
did you try to use the Firebug to debug ?
What is this firebug? I use IE to debug. I will check it out (firebug -> firefox?) Edited by MrFish

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...