l2oBiN Posted July 13, 2009 Share Posted July 13, 2009 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> Link to comment Share on other sites More sharing options...
Ingolme Posted July 13, 2009 Share Posted July 13, 2009 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. Link to comment Share on other sites More sharing options...
l2oBiN Posted July 14, 2009 Author Share Posted July 14, 2009 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 ? Link to comment Share on other sites More sharing options...
thescientist Posted July 14, 2009 Share Posted July 14, 2009 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. Link to comment Share on other sites More sharing options...
l2oBiN Posted July 14, 2009 Author Share Posted July 14, 2009 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! Link to comment Share on other sites More sharing options...
uwspstar Posted July 15, 2009 Share Posted July 15, 2009 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 ? Link to comment Share on other sites More sharing options...
MrFish Posted July 15, 2009 Share Posted July 15, 2009 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?) Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.