[RESOLVED] disp over in FF but under in IE?

**Spikeddragon** · 05-17-2007 01:47 PM

im making a tab'd menu on top of a table, but in IE, the tabs are actually UNDER the table. In firefox, they are displayed correctly, ABOVE the table. Any ideas on a fix?

Code:

<html>
<head>
<title>TABS</title>
<style>

.tabs
{
  margin: 0;
  padding: 0;
  margin-bottom: -1px;
}

.tabs li
{
  list-style-type: none;
  margin: 0;
  margin-left: 0;
  margin-right: 10;
  padding: 0;
  color: #000000;
  display: inline;
}

.tabs li a
{
  padding: 0;
  padding-left: 10;
  padding-right: 10;
  padding-top: 1px;
  text-decoration: none;
  margin: 0;
  height: 20px;
  text-align: center;
  border: 1px solid black;
  background: url(tabbg.gif) top left repeat-x;
  color: #003366;
}

.tabs li a.current
{
  background: url(tabbg.gif) 0 -20px repeat-x;
  border-bottom: 0;
  padding-bottom: 1px;
  padding-top: 0;
}

.tabtable
{
  border: 1px solid black;
  width: 600;
  height: 200;
  background-color: white;
}

</style>

<script>
function tabular(num)
{
  var tabids = document.getElementById("tabs").getElementsByTagName('A');
  for (var x = 0; x < tabids.length; x++)
    {tabids[x].className = "";}
  tabids[num-1].className = "current";
}


</script>
</head>
<body>
<BR><BR>
<ul class="tabs" id="tabs">
<li><a href='javascript:tabular(1)' class="current">anything1</a></li>
<li><a href='javascript:tabular(2)' class="">anything2</a></li>
<li><a href='javascript:tabular(3)' class="">anything3</a></li>
<li><a href='javascript:tabular(4)' class="">anything4</a></li>
<li><a href='javascript:tabular(5)' class="">anything5</a></li>
</ul>

<table class="tabtable" id="tabtable"><tr><td>blah</td></tr></table>



</body>
</html>

any suggestions would be great

**WebJoel** · 05-17-2007 02:32 PM

start (make it the FIRST line) your CSS with:

* {padding:0; margin:0;}

You may now need to re-state padding and margin for elements now 'zero-d' of their browser-specific default margin/padding. Even if this doesn't solve this problem, this is still invaluable and should be retained and used.
It appears that you do have things 'zero-ed' out, but there may be items that still have padding &/or margin, like text, etc.

**Spikeddragon** · 05-17-2007 02:36 PM

yeah, i have allready messed with some similar stuff, but have since slimmed down the css as much as possible to make sure i wasnt doing anything stupid. btw, no fix, still looking for some help

**WebJoel** · 05-17-2007 02:42 PM

I'm still looking at this... noted:

.tabtable
{ border: 1px solid black; width: 600; height: 200;
background-color: white;
}

width & height:

is that 600 pt, px, in, cm, em, ex, mi, km, ft.. (etc). Browser might default to expected "px", -but don't count on it...

(Several instances of this... not stating value-unit. The only 'value' that can be without a unit-of-measure is "0", because zero-inches = zero-px = zero-feet = (ect..)

**Spikeddragon** · 05-17-2007 02:51 PM

hehe, thought IE defaulted to px anyway, but i went ahead and added px to all values. Btw, to clarify here, the issue is that IE is not displaying correctly, and FF is, yeah, kinda backward. There is a layering going on here, that doesnt quite make sense. I have tried to solve it with layers, but then I just run into placement issues between the browsers instead. Also, no fix from the units.

Thank you for your continued help

**WebJoel** · 05-17-2007 02:52 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

.tabs
{ margin-bottom: -1px;}

.tabs li
{ list-style-type: none;
margin-right: 10px;
color: #000000;
display: inline;
}

.tabs li a
{ padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
text-decoration: none;
height: 20px;
text-align: center;
border: 1px solid black; border-bottom:0;
background: url(tabbg.gif) top left repeat-x;
color: #003366;
}

.tabs li a.current {background: url(tabbg.gif) 0 -20px repeat-x; border-bottom: 0; padding-bottom: 1px;}

.tabtable {border: 1px solid black; width: 600px; height: 200px; background-color: white;}

</style>

<script>
function tabular(num)
{
var tabids = document.getElementById("tabs").getElementsByTagName('A');
for (var x = 0; x < tabids.length; x++)
{tabids[x].className = "";}
tabids[num-1].className = "current";
}
</script>

</head>
<body>
<BR><BR>
<div style="margin:25px">
<ul class="tabs" id="tabs">
<li><a href='javascript:tabular(1)' class="current">anything1</a></li>
<li><a href='javascript:tabular(2)' class="">anything2</a></li>
<li><a href='javascript:tabular(3)' class="">anything3</a></li>
<li><a href='javascript:tabular(4)' class="">anything4</a></li>
<li><a href='javascript:tabular(5)' class="">anything5</a></li>
</ul>

<table class="tabtable" id="tabtable"><tr><td>blah</td></tr></table>
</div>

</body>
</html>

Looks exactly the same now in IE to Fx

**Spikeddragon** · 05-17-2007 03:10 PM

>.> no it doesnt, you have the same issue my man, in firefox, the border of active tab is gone, but in IE, it shows. not the same.

**WebJoel** · 05-17-2007 03:27 PM

(bak) :

What am I missing... what effect are you after here?

**Spikeddragon** · 05-17-2007 03:28 PM

making them look the same is doable ofcourse, I am trying to achieve a desired effect in both though. The selected tab should be 1 pixel lower than the rest, and it should be overlapping the table's top border, while the other tabs do not. Again, the issue comes about from the tabs going litterally underneath the table in IE, but in FF, they overlap it correctly.

**Spikeddragon** · 05-17-2007 03:37 PM

quick screen shot of what i am trying to achieve, this is a cut from Firefox, which displays correctly w/o messing around, I can also make IE look this way, though, it stops looking correctly in FF due to layer alignments.

**WebJoel** · 05-17-2007 03:46 PM

Then you need to try this:

ul.tabs li a.current {background:white url(tabbg.gif) 0 -2px repeat-x; position:relative;}

you need a default background-color. I do not have the URL to your 'background-image' called "tabbg.gif" so obviosly am seeing something different. A default-stated background-color covers the overlap 'bottom border' of the UL.

using:

ul.tabs li a.current {background:white url(tabbg.gif) 0 -2px repeat-x; position:relative;}

see screenshot: ie and Fx

(afk) :

**Spikeddragon** · 05-17-2007 03:57 PM

.... Something tells me you are using IE7 .... i copied your earlier code then added "white" to the background calls and I do not see the same thing in IE6 and firefox. >.< MS H8

PS. the bg image really shouldnt matter. afterall, it IS a background. The element itself (of height: 20px) should be covering small part of the top border of the table when the element becomes lowered by 1px. This effect does show true in Firefox, though in IE5 and IE6, it would seem that the "tab" element simply goes behind the table, rather than atop.

**Spikeddragon** · 05-17-2007 04:03 PM

OMG!!!!!!!!! I really should add more "!"
I love you joel, no joke, Ima dood, but you solved my issue with a simple css statement and you didnt even realize it!

POSITION: RELATIVE;!!! thx so much >.<

**WebJoel** · 05-17-2007 04:04 PM

shucks, -ain't nuthin' but a thang

Thread: [RESOLVED] disp over in FF but under in IE?

Thread Tools

Display

[RESOLVED] disp over in FF but under in IE?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions