/    Sign up×
Community /Pin to ProfileBookmark

CSS / Cross Browser / Newbie

Copy linkTweet thisAlerts:
Nov 02.2007

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

The page at [url]www.bargameolympics.com[/url] (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!

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@drhowarddrfineNov 03.2007 — 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?"
Copy linkTweet thisAlerts:
@Major_PayneNov 03.2007 — Correct your [B]HTML coding errors[/B]. CSS validated ok.

Ron
Copy linkTweet thisAlerts:
@G_FloppyauthorNov 03.2007 — 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).
Copy linkTweet thisAlerts:
@WebJoelNov 03.2007 — Instead of:
<p class="padded">Enter by e-mailing your logo to:[B]</p>[/B]

<a href="mailto:logo-competition@bargameolympics(dot)com" class="padded">

logo-competition@bargameolympics(dot)com</a>[/QUOTE] you could try:
<p class="padded">Enter by e-mailing your logo to:[B]<br />[/B]

<a href="mailto:logo-competition@bargameolympics(dot)com" class="padded">

logo-competition@bargameolympics(dot)com</a>[B]</p>[/B][/QUOTE] 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, ...

[upl-file uuid=7b8004c1-5a52-4dca-b7e3-d48226a7be09 size=3kB]ScreenHunter_2.gif[/upl-file]
Copy linkTweet thisAlerts:
@G_FloppyauthorNov 05.2007 — 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
Copy linkTweet thisAlerts:
@WebJoelNov 05.2007 — <div id="container" [B]style="border-top:1px solid silver; margin-top:0;"[/B]>

<!-- #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" [B]style="width:616px; margin-top:0;"[/B]>[/QUOTE] I'm kind of at a loss as to [I]why[/I] this works... Seemingly, the "border-top:1px solid [I]color[/I];" is doing something... in it's [I]absence[/I], Fx causes the "page_content" to drop about 4 or 5px... ?
Copy linkTweet thisAlerts:
@G_FloppyauthorNov 05.2007 — This works! Not sure how I would ever have figured it out, though.

Is it a FF bug?

And THANKS!
Copy linkTweet thisAlerts:
@WebJoelNov 05.2007 — Bug? I doubt it. It's probably something I am not seeing.

Note tht I changed your width <div id="[B]page_content" style="width:616px;[/B] 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 [I]color[/I];" somehow causes this to not 'drop' 4 or 5px, huh? ?

If you don't want the color, -use white or maybe try "none"..
×

Success!

Help @G_Floppy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.22,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...