/    Sign up×
Community /Pin to ProfileBookmark

IE Vertical margin doubling bug?

Copy linkTweet thisAlerts:
Sep 11.2006

Hi there,

I’m not sure if this is what is happening, but it looks like in IE, my margin is doubling vertically in my left navigation. Can anyone see what is the problem? It seems to work in Firefox and Safari, but I’ve had no luck with IE on the PC.

HTML: [url]http://www.langara.bc.ca/subjareas/bio/[/url]

Main CSS: [url]http://www.langara.bc.ca/subjareas/resources/styles/main.css[/url]

It looks like my bottom margin for #leftnav-line is doubling in IE, and I can’t figure out how to fix this.

Thanks in advance!

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelSep 11.2006 — add this style to your page:

<style>

body, html {border:0; margin:0; padding:0;}/* Re-sets IE to "zero" for these */

</style>

All other browsers do this by default. You can 'star-hack' for IE if you prefer, but this won't affect other browsers either way. Should solve the problem.
Copy linkTweet thisAlerts:
@ChitoauthorSep 12.2006 — It didn't fix it, unfortunately ?

Any other ideas on what it might be? Perhaps it's not the margin doubling problem? I can't seem to figure this out.
Copy linkTweet thisAlerts:
@WebJoelSep 12.2006 — Yeah, -actually, I do. ?

<div id="main">

<div id="leftnav">

<a href="index.html">Home</a>

<a href="objectives.html">Outcomes &amp; Objectives</a>
<a href="careers.html">Careers in Biology </a>
<a href="faculty.html">Faculty</a>
<a href="contact.html">Contact Information</a>
<div id="leftnav-line">
</div>

<a href="degrees.html">The Programs</a>
<a href="about.html">About the Department</a>
<a href="facilities.html">Laboratory Facilities</a>
<a href="transfer.html">Transferability</a>
<div id="leftnav-line">
</div>
<span><a href="javascript:windowOpen('http://www.langara.bc.ca/admission/index.html')">Admission Requirements</a></span>

<span><a href="javascript:windowOpen('http://www.langara.bc.ca/courses/subj/BIOL.html')">Courses</a></span>
<span><a href="javascript:windowOpen('http://www.langara.bc.ca/news/infoses/BIOL.html')">Information Sessions</a></span>
</div>[/QUOTE]

I'll go through this later, it should be an <UL> and I'd take-out that <div id="leftnav-line"> which will act not as you expect. If you want to seperate certain items with a single dotted line, there is another, more semantic way to doing it and not have it behave as if it were another anchor (vis "leftnav").

I have your code offline, and absolute-linked to your CSS so I will look this over in a little while... ?
Copy linkTweet thisAlerts:
@ChitoauthorSep 12.2006 — Ok thanks I appreciate it!
Copy linkTweet thisAlerts:
@WebJoelSep 19.2006 — <body>

<div id="header">

<h1 title="Biology - Science and Technology" ><span>Biology - Science &amp; Technology</span><a href="http://www.langara.bc.ca"><img src="../images/langara.jpg" alt="Langara College" border="0" /></a>

<img src="images/subjpng.png" alt="Biology" height="190" width="392" /></h1>

</div>

<div id="toolbar"><!-- #BeginLibraryItem "/Library/toolbar.lbi" -->

<ul>

<li><a title="Apply Now" href="#">Apply Now</a></li>

<li><a title="Tell a Friend" href="#">Tell a Friend</a></li>

<li><a title="Ask a Question" href="#">Ask a Question</a></li>

</ul>

</div><!-- #EndLibraryItem -->

<div style="width:760px; margin:0 auto;">
<[B]ul[/B] id="leftnav" style="list-style-type:none; margin:0 2px 0 2px; width:175px;">
<li><a title="Home" href="index.html">Home </a></li>
<li><a title="Outcomes and Objectives" href="objectives.html">Outcomes &amp; Objectives </a></li>
<li><a title="Careers in Biology" href="careers.html">Careers in Biology </a></li>
<li><a title="Faculty" href="faculty.html">Faculty </a></li>
<li><a title="Contact Information" href="contact.html">Contact Information </a></li>
[B]<li style="line-height:8px; width:52%; margin:5px auto 7px 25px;">............................</li>[/B]
<li><a title="The Programs" href="degrees.html">The Programs </a></li>
<li><a title="About the Department" href="about.html">About the Department </a></li>
<li><a title="Laboratory Facilities" href="facilities.html">Laboratory Facilities </a></li>
<li><a title="Transferability" href="transfer.html">Transferability </a></li>
[B]<li style="line-height:1.5em; width:52%; margin:5px auto 7px 25px;">............................</li> [/B]

<li><a title="Admission Requirements" href="javascript:windowOpen('http://www.langara.bc.ca/admission/index.html')">Admission Requirements</a></li><li><a title="Courses" href="javascript:windowOpen('http://www.langara.bc.ca/courses/subj/BIOL.html')">Courses</a></li><li><a title="Information Sessions" href="javascript:windowOpen('http://www.langara.bc.ca/news/infoses/BIOL.html')">Information Sessions</a></li>

[B]</ul>[/B]...etc[/QUOTE]
I changed a few things, used LI to make a dotted line and 'margin'-ed it to be vertically-even between sections of LI's. I then noticed some font-size anomolies but if you can fix these yourself perhaps, that would be great. *I* may have inadvertantly altered something on my offline copy...

Let me know if this fix is okay for you. There should be a better way to do a 'dotted line' inside of a <ul>. Maybe multiple <ul> with dotted line border-bottoms and 'position' the <ul> below it to symmetry. Not even sure if this would not throw errors/warnings when validated. But it looks very similar upon IE vs. Fx...

[upl-file uuid=e604325c-1e4d-4f45-b293-9055d7f27ffb size=27kB]left-nav.gif[/upl-file]
×

Success!

Help @Chito 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...