Well, ladies and gentlemen, I have a problem with my web site -- to be exact, highlighting tabs.
It works fine in Firefox, but not in IE. Bah, compatibility issues.
Here are the images:
Firefox -- excellent.
IE -- Gah.
...and here is the relevant code.
<ul id="menu">
<li><a href="html.html">Home</a></li>
<b><li>Information</li></b>
<li><a href="subforms.html">Submission Forms</a></li>
<li><a href="gmap.html">Graduate Map</a></li>
<li><a href="smap.html">Student Map</a></li>
<li><a href="gbook.html">Guest Book</a></li>
</ul>
ul#menu li b {
text-decoration:none;
color:#3ca4ae;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
background:#e6e6e6 url(images/slice_tab.jpg) repeat-x;
padding-left:25px;
padding-right:25px;
padding-top:9px;
padding-bottom:11px;
}
I believe that is all that will be necessary -- it seems to simply be padding issues. As you can see, I've already tried placing an image in to replace a color block, but I.E. won't recognize that either.
By the way, any change in the padding size obviously changes the gray area in Firefox, but it has no effect on the IE page.
;[
Help?
Post has been edited 2 time(s), last time on Jan 10 2009, 9:27 pm by JamaL. Reason: new information
None.
Relatively ancient and inactive
Try subdividing the list into divs instead, each with a set width/height. Then give those rollover background changes. It's what I did, though in Firefox your method is cleaner.
Put this on every div:
onMouseOver = "this.className = 'button2'" onMouseOut = "this.className = 'button1'"
Or whatever you want to stick there. It depends on Javascript, and IE should support javascript that simple.
And something like this in the CSS:
.button1 {
background-image: url('Images/ButtonBGReg.png');
Blah
}
.button2 {
background-image: url('Images/ButtonBGOn.png');
blah
}
There might be a quicker CSS way, but this should work if you can't find a way using your method.
None.
I think he wants permanent highlighting on loaded tabs, given by his use of <b> in the actual html.
I hate IE issues. Is it IE 6, 7, 8, or all? If you upload the entire site to me, I might tinker with it. Tabs is something I've been playing with, starting with the profiles and working it's way into the cp.
None.
Relatively ancient and inactive
No, his CSS requirements for that all to actually happen effectively mean just the navigation. List with ID menu, etc. Mine isn't the nice fix that can be done through just CSS, but it should work
.
None.
IP is correct -- I want a permanent highlighting for the tab that represents the page you are currently in.
I haven't tested it in IE6, but the problem is occurring in IE7.
If no one has a fix that can be applied in the CSS, I'm open for any other ideas.. and if I can't solve the issue even then, I'll upload it so it can be dissected.
It's just an HTML page built from scratch. In fact, here's an image of the full website (essentially all that is finished, at the moment).
Of course, I blurred out all my geeky writings ;]
None.
Relatively ancient and inactive
Are you making separate pages for each page? If so, you can just for each page link to a css file with the two classes in it and specify what class each of the navigation links is in there.
None.
Are you making separate pages for each page? If so, you can just for each page link to a css file with the two classes in it and specify what class each of the navigation links is in there.
That's exactly what I am doing, but IE simply won't read the padding settings and make a gray box of the set dimensions.
None.
Relatively ancient and inactive
I already said that too.. make Divs instead. Divs of set dimensions with centered text (horizontal) inside. If needed, you should be able to pad the next inside to center it or something. Divs are easier to work with.
None.
I'm a newbie at HTML and CSS (this is my first serious attempt), so if you could explain how exactly I would create the div's, I would greatly appreciate it.
EDIT: Actually, I have tried setting up DIVs -- and they caused the other text on the same line to move drastically.
None.
Relatively ancient and inactive
#blah {
width: 40px;
height: 13px;
color: #F1F1F1;
}
.closed {
background-color: #FFFFFF;
}
.open {
background-color: #111111;
}
<div id="blah" class="closed">Link1</div><div id="blah" class="closed">Link2</div><div id="blah" class="closed">Link3</div><div id="blah" class="closed">Link4</div><div id="blah"><div id="blah" class="open">Link5</div>
This is it, basically. The first part is the CSS, the second the navigation bar. You apply everything else you need there (text-align: center;, too lazy to add it now), see what happens. I usually play around a bit to get what I want, I don't memorize all of CSS off-hand.
Oh, and don't go too much out of your way to accomodate IE6 users or Netscape or whatever old browser. If they want to limit themselves thusly, it's their problem and shouldn't be yours.
None.
I don't intend to, and I'm not too worried about compatibility issues.
Unfortunately, even with that code, the same thing happens -- it places it on a new line.
None.
Start off by setting margin to 0px for li elements and then compensate for whatever with padding.
What is your li css anyways?
None.
Li:
ul#menu li {
display:inline;
margin-left:25px;
}
...and for Li with A..
ul#menu li a {
text-decoration:none;
color:#3ca4ae;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
Post has been edited 1 time(s), last time on Jan 11 2009, 3:20 am by JamaL.
None.
With all of the above li's as they are, and the following CSS and HTML, it appears as shows..
<ul id="menu">
<li><a href="html.html">Home</a></li>
<li><a href="information.html">Information</a></li>
<div class=button>
<li>Submission Forms</li>
</div>
<li><a href="gmap.html">Graduate Map</a></li>
<li><a href="smap.html">Student Map</a></li>
<li><a href="gbook.html">Guest Book</a></li>
</ul>
.button {
background:#e6e6e6;
padding:5px 10px 5px 10px;
color: #2a2a2a;
text-decoration:bold;
text-transform:uppercase;
font-size:10px;
}
None.
If you upload the site, I will fix it tomorrow morning. You are more than welcome to delete any geeky text and just leave the nav system there ;o
Doesn't have to be publicly uploaded either.
None.
PM'd you...
If anybody has any ideas, feel free to post them.
None.
IE hated your absolute positioning. Opera hated your tabs all together, I knew your code was kinda shady though ;o
I also made the links/tabs stay in place more, as they use to shift around when they became active.
The fix:
I deleted everything that contained #menu, lines 46-91 and replaced it with:
#nav_position { position:absolute; top: 103px; }
#nav_wrap { margin:0px 0px 0px 15px; padding:0px; display:inline; position:relative; height: 20px; }
.nav_link { font-size:10px; margin: 0px 11px; display: inline; text-transform:uppercase; font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif;}
.nav_link a { padding: 15px; color:#3ca4ae; }
.nav_link a.active, .nav_link a:hover { color:#2e6e74; text-decoration: none; }
.nav_loaded { padding: 11px 15px 12px 15px; text-decoration:none; color:#3ca4ae; background:#e6e6e6 url(images/slice_tab.jpg) repeat-x; }
And for your link html, replace it with:
<div id="nav_position">
<div id="nav_wrap">
<div class="nav_link nav_loaded">Home</div>
<div class="nav_link"><a href="information.html">Information</a></div>
<div class="nav_link"><a href="subforms.html">Submission Forms</a></div>
<div class="nav_link"><a href="gmap.html">Graduate Map</a></div>
<div class="nav_link"><a href="smap.html">Student Map</a></div>
<div class="nav_link"><a href="gbook.html">Guest Book</a></div>
</div>
</div>
Some tweaking with the pixels may be in order.
Edit: Fixed some pixels.
Post has been edited 6 time(s), last time on Jan 11 2009, 2:33 pm by isolatedpurity.
Excellent! It works flawlessly.
Now, on to the rest of the site...
None.
Three words: Global CSS reset.
None.
Three words: Global CSS reset.
More like 2 words and an acronym
None.
