Why is the page incorrectly parsed by Firefox?

Discussion in 'HTML & Website Design' started by the_mumu, May 16, 2008.

0
  1. #1
    Hi everyone,

    I have a problem when viewing my website in Firefox:

    http://verkoso.com/on-diamonds/history/

    That, and most other pages on the website have an odd property of having the main portion of the page render wider than the window size on Firefox. All other browsers seems to have to problem parsing the page as expected. Moreover, if I hit 'refresh' in Firefox, it will render everything correctly the second time around.

    It is a very fluid design and can technically fit without overflowing into rather narrow windows. I am aware that some people consider fluid layouts to be thing of the past, but still, that is a matter of taste while my issue is purely technical.

    I would really appreciate if could point me at why this may be happening. Maybe I have some really odd way of combining lots of div's? :confused:

    Please help! I follow with a basic code template I use:


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en-us" dir="ltr"><head>
<title>Title</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link href="/styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/print.css" media="print,projection">
<script type="text/javascript" src="some_js.js"></script>

</head><body>

<div id=container>
<div id=home>home link goes here</div>
<div id=logo>Logo goes here</div>
<div id=top>small menu goes here</div>
<div id="navbar">a menu goes here</div>

<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">

<div id="image">An image or some extra goes here</div></div>

<div id="content">Some content here</div>

</div></div></div></div></div></div></div></div>


<div id=footer>Footer here
</div></div>
</body></html>
    HTML:
     
    the_mumu, May 16, 2008 IP
  2. the_mumu

    the_mumu Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I do realize the bunch of nested divs <div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr"> look awful, but I did not find a more elegant way of making a soft round border around the page's content area. If you know of a nicer way, share and I'll respect you forever!
     
    the_mumu, May 16, 2008 IP
  3. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #3
    try 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-us" dir="ltr">
	<head>
		<title>Title</title>
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
		<link href="/styles.css" type="text/css" rel="stylesheet"/>
		<link rel="stylesheet" type="text/css" href="/print.css" media="print,projection"/>
		<script type="text/javascript" src="some_js.js"></script>
	</head>
	<body>
		<div id=container>
			<div id=home>home link goes here</div>
			<div id=logo>Logo goes here</div>
			<div id=top>small menu goes here</div>
			<div id="navbar">a menu goes here</div>
			<div class="t">
				<div class="b">
					<div class="l">
						<div class="r">
							<div class="bl">
								<div class="br">
									<div class="tl">
										<div class="tr">
											<div id="image">An image or some extra goes here</div>
										</div>
										<div id="content">Some content here</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id=footer>Footer here</div>
		</div>
	</body>
</html>
    Code (markup):
     
    crath, May 16, 2008 IP