CSS / Cross Browser / Newbie

[G_Floppy]

Can someone help me with some cross browser quirks I'm having?

The page at www.bargameolympics.com (a learning exercise) renders (roughly) as I'd like in IE7.

In Firefox, I get some blank space between the navigation bar at the top and the rest of the content. Why?

In IE6, the page draws correct momentarily, but then content at the bottom of the right column gets overwritten by white (starting on my machine just below "Enter by e-mailing your logo..."). Why?

Thanks in advance for any help!

[drhowarddrfine]

An id name must be unique to an element and used only once per page. You use it more than once.

Never hold IE up as an example of something working. Firefox should be your design browser. When you get it working there, the question should be "What is IE doing to my valid markup?"

[Major Payne]

Correct your HTML coding errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.bargameolympics.com%2F). CSS validated ok.

Ron

[G_Floppy]

Ok... All HTML errors are now fixed and it validates for both HTML and CSS.

I still have the unwanted blank space under the navigation bar in Firefox (though not in IE7).

I can't check the IE6 behavior I was having from here at home, but I suspect it's the same (as the HTML fixes didn't deal with that portion of the page).

[WebJoel]

Instead of:
<p class="padded">Enter by e-mailing your logo to:</p>
<a href="mailto:logo-competition@bargameolympics(dot)com" class="padded">
logo-competition@bargameolympics(dot)com</a> you could try:
<p class="padded">Enter by e-mailing your logo to:<br />
<a href="mailto:logo-competition@bargameolympics(dot)com" class="padded">
logo-competition@bargameolympics(dot)com</a></p> to include the "anchor" in the styles dictated by the "<p>"...
Otherwise, "a" is a child of that DIV and unless there's specific rules for it, ...

[G_Floppy]

Sorry to rehash this, but I'm still struggling.

www.bargameolympics.com

I've managed to work through my problems except for the blank space beneath #top-nav that appears in FF but not in IE7.

Any thoughts?

Thanks in advance!

Greg

[WebJoel]

<div id="container" style="border-top:1px solid silver; margin-top:0;">
<!-- #BeginEditable "body" -->
<div id="left_col">
<p class="left-heading">NEWS &amp; UPDATES</p>
<p class="date">October 20, 2007</p>
<p class="item">BGO I participant Dave Murphy commits to BGO II.</p>
<p class="date">October 19, 2007</p>
<p class="item">Revamped BGO website is launched.</p>
<p class="date">October 18, 2007</p>
<p class="item">Official planning for BGO II gets under
way.&nbsp; Five athletes commit to 2008 participation.&nbsp;
(read more)</p>

<p align="right"><a href="#nogo" class="more">more news...</a></p>
<p class="left-heading">MAILING LIST</p>
<form action="gdform.asp" method="post">
<input type="hidden" name="subject" value="BGO Mailing List Subscription" />
<p>To keep up to date on all BGO happenings, including a
(roughly) weekly newsletter leading up to BGO II, join our
MAILING LIST by entering your e-mail below and clicking
submit.</p>
<p>E-Mail:
<input type="text" name="email" style="width: 150px" /></p>
<input type="submit" name="submit" value="submit"/>
</form>
<p class="left-heading">FEATURED ATHLETE</p>
<img src="images/featureHeadshots/feathead_4.jpg" alt="featured athlete" width="76" height="74" style="float: left; padding-right: 5px;"></img>

Greg Rogers - Competition tested warrior who has competed at the highest level in front of raucous crowds...

<p><a href="http://www.bargameolympics.com/profiles/grogers.htm" class="more">(more)</a></p><br />
</div>



<div id="page_content" style="width:616px; margin-top:0;"> I'm kind of at a loss as to why this works... Seemingly, the "border-top:1px solid color;" is doing something... in it's absence, Fx causes the "page_content" to drop about 4 or 5px... :confused:

[G_Floppy]

This works! Not sure how I would ever have figured it out, though.

Is it a FF bug?

And THANKS!

[WebJoel]

Bug? I doubt it. It's probably something I am not seeing.

Note tht I changed your width <div id="page_content" style="width:616px; margin-top:0;"> because it seemed to be 'dropping below' in my ie-based html-editor.

I added "margin-top:0;" to that and the container, -but they seem to already BE "margin-top:0;". I was just ruling out things.
It IS odd... it really seems as if "border:1px solid color;" somehow causes this to not 'drop' 4 or 5px, huh? :confused:
If you don't want the color, -use white or maybe try "none"..