On this test page: http://jimpix.co.uk/clients/a/photos/
I have a "sub navigation" UL below the main navigation UL.
When viewed in Firefox 3, there is a 10px gap between the subnav UL and the UL above, and the div below.
When viewed in IE6, that gap is doubled - see this screenshot: http://jimpix.co.uk/clients/a/untitled.png
I can't work out why.
The #nagivation ul is defined as:
Code: - #navigation ul {
-
float:left;
-
width:100%;
-
padding:0;
-
list-style:none;
-
background:#306090;
-
margin: 0 0 10px 0;
-
}
If I remove the 10px margin-bottom, then it sort of fixes it in IE6, by reducing the gap above the subnav UL, but it still leaves a huge gap below the subnav ul, and anyway, then it completely removes the gap in Firefox, so the main nav ul and subnav ul have no gap between them!
HTML = valid
Any advice much appreciated.
7 1617
I don't have IE on this box but you can look here to see if this is the cause. One of a bazillion IE bugs.
Thanks for the reply. I tried adding in a display:inline but alas it doesn't fix it. Or, it fixes it for IE6, but not for FFox.
Could I hack it by having 1 CSS file for IE, and another for FFox, or is that too much hacking?
Thanks
Jim
Not sure what you mean? As of this writing the page appears to be identical in IE/6, IE/7, Mac Opera/9.52, Mac Safari/3.1.4, and Mac Firefox/3.0.2.
Thanks for checking -
I test with IE6 and FFox 3. On IE6, the margins around the 'sub nav' are too wide.
I have done a few tests on BrowserCam here: http://www.browsercam.com/public.aspx?proj_id=444442
On the IE6 screenshots, see how the top and bottom margins around the blue nav bar that starts with 'home' are loads bigger than when viewed in FFox or IE8?
I can't work it out! It's really strange.
Yet, a similar page I've done, using pretty much identical markup looks okay in IE6: http://www.ama-online.org.uk/newsite/community/
How strange is that? I've even tried swapping the stylesheet from the page that works, and putting it into the jimpix page, and it removes the IE6 problem.
Seems to be something I've done in the CSS that has screwed it up, but I can't work out what!
Done some more digging by comparing the page that works, with the one that doesn't work.
Problem is this bit of the HTML: - <div id="ad">
-
-
<img src="../css/img/200.png" class="floatleftclear" style="border:0px;" alt="jimpix" />
-
-
<p>
-
<script type="text/javascript"><!--
-
google_ad_client = "pub-6959836182614616";
-
google_ad_width = 728;
-
google_ad_height = 65;
-
google_ad_format = "728x90_as";
-
google_ad_type = "text_image";
-
google_ad_channel ="";
-
google_color_border = "F5F6F9";
-
google_color_bg = "F5F6F9";
-
google_color_link = "FF3399";
-
google_color_url = "008000";
-
google_color_text = "333333";
-
//--></script>
-
-
<script type="text/javascript"
-
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
-
</script>
-
</p>
-
</div>
With the #ad as: - #ad { background-color:#F5F6F9; margin-bottom:10px; }
If I remove the google ads, it fixes the problem!
If I add this after the #ad end div:
<div class="cleared"></div>
With the cleared class as: - div.cleared { clear:both; height:1px; }
Then it fixes the padding around the sub-nav, and adds a stupid huge gap above the main blue nav bar instead!
Am I doing something really silly?
Thanks
Keep it simple for all concerned. Can't hit a moving target, nor determine if we're on the same book and page. Point only to the page that shows the problem that needs correction.
Sorry David, for wasting your time.
I've worked it out now. I don't know how, but by working against the page which didn't have the margin problem, I've fixed the original.
I'm sorry for flitting about all over the place.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: tomasio |
last post by:
Dear Group,
The Site under the following link
(http://tomasio.laudatio.com/temp/schiepek/index.html) displays as I
want it to in IE 6 (under Win XP) but does not render correctly in
Firefox...
|
by: skeeterbug |
last post by:
http://www.geocities.com/operationsengineer1/test2.htm
the extra space between the logoHeader and the menu bar occurs when i
add the <ul>. if i comment out the ul and and all the li, the 1em...
|
by: Spondishy |
last post by:
Hi,
I have a problem with divs and padding in IE6 and Firefox. Basically my
example that I have attached works exactly how I want in IE6, but
padding is treated differently in Firefox. My...
|
by: Tony LaPaso |
last post by:
Hi All,
I have a simple style sheet example below and I'm seeing different
results in IE 6 vs. Firefox 1.0.3. I'm not sure which browser is
rendering it correctly but I'm tending to think it's...
|
by: biegel |
last post by:
I'm having a strange problem with one browser: Firefox 1.5 on Mac OS X.
Surprisingly Safari works perfectly (it's usually the odd one out in
my experience). Here's the situation:
I've got a...
|
by: Dave Woodwater |
last post by:
Hi,
I'm trying to build a camera control menu bar for a web application.
I've gotten everything to work in IE6/7 but Firefox as a little bug.
Actually, it's probably IE that handles it...
|
by: Mark |
last post by:
I have developed a generic list-based css menu. It works both in IE7 and
Firefox, and with the help of Peter Nederlof's csshover.htc, with older
IE versions.
I have included a simplified version...
|
by: ottawamom |
last post by:
Hi there,
simply.amandadevries.com/index.html
The page validates fine. Yes I know I'm using a table where I
shouldn't but I can't otherwise figure out how to get my little image
for the list...
|
by: littlealex |
last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS!
In IE6 the text for the following page doesn't display properly - rather than being...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |