13 replies [Last post]
bowlingtourneycom
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2006-01-19
Posts: 20
Points: 0

Here is a link to an image of the problem:

http://www.bowlingtourney.com/bt2006/CSS_issue.gif

Notice how in Firefox everything is nice and flush with the navbar, but in the bottom image with IE6 it wants to take the first <div id="content"> and force the navbar down a space. The following info is a coded group of <div id="content"> but those layout just fine.

If I remove the offending DIV, the other content boxes display just fine in both browsers. I'm seriously confused on this one. Any ideas what is causing this?

Thanks
Shawn

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 10 years 35 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

&quot;Gap&quot; Effect

Hi Shawn...welcome to the forum.

Your post is vague with no css, code or link. It could be a number of things. Can you post a link or your code, please? Smile

- r

bowlingtourneycom
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2006-01-19
Posts: 20
Points: 0

&quot;Gap&quot; Effect

ragamuffin wrote:
Hi Shawn...welcome to the forum.

Your post is vague with no css, code or link. It could be a number of things. Can you post a link or your code, please? Smile

- r

Thanks for the welcome. I was unsure of what would be needed. Here is the CSS Code for the navbar and content areas. I am essentially using the basic Dreamweaver 2 Column Left Nav CSS sheet.

#navBar{
	margin: 0 82% 0 0;
	padding: 0px;
	background-color:#BABABA;
	border-right: 1px dotted #000000;
	border-bottom: 1px solid #ccc;
}

#content{
  float:right;
	width: 75%;
	margin: 0;
	padding: 0 3% 0 0;
	height: 100%;
}

Here is the offending code itself:

<?php

(This is the code that is pushing down the Navbar does the same inside the PHP or outside in normal HTML)

echo '<div id="content">';
echo '<table width="90%" align="center" border="1" style="font-size:15px">';
echo '	<tr align="center">';
echo '		<td>';
echo '			<b>Tournament Listings</b>';
echo '		</td>';
echo '	</tr>';
echo '</table>';
echo '</div>';
	
(This is the start of the gray tables in the image along with some PHP code and MySQL accessing, this displays fine every time.)	
echo '<div id="content">';

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 11 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

&quot;Gap&quot; Effect

My first thought is that IE's poor handling of margin collapse is causing the problem. However, there's no way to really know without a look-see at the source. Please post a live link or create a minimal test case.

[edit] Looks like we x-posted. When posting html, please post the server output rather than the PHP script. Unless that's a true minimal test case, and it's not, we need a live link too.[/edit]

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bowlingtourneycom
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2006-01-19
Posts: 20
Points: 0

&quot;Gap&quot; Effect

kk5st wrote:
My first thought is that IE's poor handling of margin collapse is causing the problem. However, there's no way to really know without a look-see at the source. Please post a live link or create a minimal test case.

cheers,

gary

A live link to see what is going on would be:

http://www.bowlingtourney.com/bt2006/bt.php

(which displays fine using the <div id="content"> btw), but select a state from the search in the NavBar and you'll see what is occurring.

Not sure what you mean by the actual output, but what the code is telling it to do is display a table (tournament listings), then it runs the code and displays othe tables with tournament information depending on how many results it finds. Could be 0, could be 20. However it's only that single line table that is causing the problems. If i remove it and display on the tournament results (the gray tables), everything displays fine.

Thanks
Shawn

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 11 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

&quot;Gap&quot; Effect

Well. Two things arouse suspicion. Neither were tested, I'll leave that to the more ambitious.

I will say that I cannot see any reason for this. There is no apparent conflict. It looks like, for some reason, #navbar is clearing #tlist. Have you tried floating #navbar? Have you tried with content in the table in #tlist? If #navbar drops as #tlist's table fills, then you have a clue.

Try renaming #tlist to #content. They look to have the same style rules, so don't know why the same block would have different names.

IE does not properly collapse margins if an element has dimensions (hasLayout=true). Try giving form {margin-top: 0;}.

If you and everyone continue to be stumped, start stripping all code, html and css, that does not fix the problem. When you can no longer remove anything, what's left must be (parts of) the problem.

[edit]Did you know you have two complete documents on that page? IE is probably upset by that. It is actually a bit less fault tolerant than Firefox. You need to fix that before we can continue.[/edit]

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bowlingtourneycom
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2006-01-19
Posts: 20
Points: 0

&quot;Gap&quot; Effect

#tlist was originally #content. I actually changed it to see if it would help solve the problem. No dice.

I have yet to add additional content into the tlisting table. I will definately mess with your suggestions and any other suggestions anyone else has tomorrow So keep em comin all you nightowls! Laughing out loud

I added an additional page with some tables this evening. No additions to my CSS sheet were made and they work fine in both Firefox and IE. STUMPED!

I really do appreciate all the quick help I'm getting here. Seems like a really good place to hang out so far.

Thanks Again!
Shawn

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 11 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

&quot;Gap&quot; Effect

We crossed again. Look at my edit.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bowlingtourneycom
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2006-01-19
Posts: 20
Points: 0

&quot;Gap&quot; Effect

kk5st wrote:
We crossed again. Look at my edit.

cheers,

gary

Forgot to remove that from one of my include files. It's gone but the problem still exists.

[edit]Tried the add content to the first table idea. I left it in for now. It just pushes it down another row.[/edit]

airswit
airswit's picture
Offline
Enthusiast
California
Last seen: 8 years 11 weeks ago
California
Timezone: GMT-7
Joined: 2006-01-07
Posts: 124
Points: 9

&quot;Gap&quot; Effect

just fyi, when doing php, you can do

echo <<< END
  <html>
    <body>
      <div>Any html can go here</div>
      <a href="here.php">link</a>

END;

or
<?php php_stuff();?>
  <html>
    <body>
      <div>Any html can go here</div>
      <a href="here.php">link</a>

<?php more_php_stuff();
...
?>

to make it a lot easier to output html in a php script. sorry, no help on the css, but just a tip

bowlingtourneycom
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2006-01-19
Posts: 20
Points: 0

&quot;Gap&quot; Effect

thanks for the tip airswit.

As for an update. Still no dice getting rid of that gap. Here is my updated CSS code:

#navBar{
	width: 225px;
	background-color:#BABABA;
	border-right: 1px dotted #000000;
	border-bottom: 1px solid #ccc;
}

#content{
	float: right;
	width: 75%;
	margin: 0;
	padding: 0 3% 0 0;
	height: 100%;
}

#tlisting{
  float:right;
	width: 75%;
	margin: 0;
	padding: 0 3% 0 0;
	height: 100%;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 11 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

&quot;Gap&quot; Effect

You have the empty div id="content" immediately following the table. In IE, it's 19px high due to IE reserving a line-box. Try removing it. I feel (not tested) that's your problem. After that, I got nuthin'. You may need to either whack it back or rebuild from zero 'til it either works or doesn't, depending on which direction you're going.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bowlingtourneycom
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2006-01-19
Posts: 20
Points: 0

&quot;Gap&quot; Effect

kk5st wrote:
You have the empty div id="content" immediately following the table. In IE, it's 19px high due to IE reserving a line-box. Try removing it. I feel (not tested) that's your problem. After that, I got nuthin'. You may need to either whack it back or rebuild from zero 'til it either works or doesn't, depending on which direction you're going.

cheers,

gary

I appreciate you giving it a shot Gary. It's not exactly an empty div id="content" following the table. It is actually sitting outside of a "for" statement. At the bottom of the code which builds tables with tournament listings is the closing </div>

I tried moving it inside of the for statement, essentially creating a new div id=content each time it loops. FireFox is still ok, however IE pushes the Navbar down even farther.

[edit] EUREKA!!!!! I decided to try and make the whole script one big div id=content. IE seems to like that alot as the problem is now gone. Not sure why but it really doesn't seem to like multiple div's going next to my Navbar...??? Oh well, it's working. the help troubleshooting has been VERY much appreciated![/edit]

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 11 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

&quot;Gap&quot; Effect

That's the same effect as removing it from where it was. The source order was

                               1. float right (the table)
3. (navbar)                    2. float right (#content)

Firefox quite properly ignored the empty #content div. IE never has an empty block element, so navbar was placed opposite #content.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.