PDA

View Full Version : active page - navbar textproblem


henryhayes
05-10-2011, 07:08 PM
I am trying to make a navbar with an active page-function using the selected / unselected method.
It works for background-color but i cant make it work for the text.
Ive added the value color to the selected / unselected CSS class, but it doesnt work.


What am i doing wrong?


Since padding is added will the code work in IE?


Heres the code:


HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index_test</title>
<link href="css/navbarcss.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="navwrap">
<div class="navbar">
<ul>
<li class="selected"><a href="../navbar/index_test.html">index_test</a></li>
<li class="unselected"><a href="../navbar/index_linked.html">index_linked</a></li>
</ul>
</div>
</div>
</body>
</html>


CSS
#navwrap {
background-color: #FFC;
margin: 0px;
padding: 0px;
float: left;
height: 100%;
width: 200px;
position: relative;
visibility: visible;
}

.navbar{
border: 1px solid #C0C0C0;
background-color: transparent;
border-bottom-width: 0;
width: 200px;
}

.navbar ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.navbar a{
font: bold 14px Verdana;
padding: 3px 3px;
display: block;
width: 100%;
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

.navbar a:visited{
color: #595959;
}

.navbar a:hover{
background-color: #C90;
color: black;
}

.selected {
color: #C90;
background: #5D0C0C;
}
.unselected {
color: #0CC;
background: #336699;
}

DWcourse
05-10-2011, 10:35 PM
Try defining this rules instead (the rule selector needs to be specific enough to overwrite .navbar a rule and needs to be applied to the link rather than the list item holding the link.

.navbar a.selected {
color: #C90;
background: #5D0C0C;
}

And apply it like this:

<li><a href="../navbar/index_test.html" class="selected">index_test</a></li>
<li><a href="../navbar/index_linked.html">index_linked</a></li>

There shouldn't need to be a rule for unselected.

henryhayes
05-11-2011, 07:28 AM
Hello DWcourse and thx for reply. I've just tested your answer. And it works perfectly! Thats a nice and simple method to do the down state.

Do you think the code will work with older versions of IE? Since theres some padding applied will i need to compensate for that somehow?

Thx again, you just saved me hours of googling

DWcourse
05-11-2011, 08:30 PM
Do you think the code will work with older versions of IE? Since theres some padding applied will i need to compensate for that somehow?

Thx again, you just saved me hours of googling

It should work but the only way to be certain is to test it. And you're welcome.

henryhayes
05-11-2011, 09:05 PM
Just did. Not working in IE7. Expands vertically on hover with a few pixels. Any simple hack to adjust for IE-usage?

Heres the code with DWCourse adjustments:

HTML
<body>
<div id="navwrap">
<div class="navbar">
<ul>
<li><a href="../navbar_vertical_dynamicdrice/index_test_forumtest.html" >index_test</a></li>
<li><a href="../navbar_vertical_dynamicdrice/index_linked_forumtest.html" class="selected">index_linked</a></li>
</ul>
</div>
</div>
</body>

CSS

#navwrap {
background-color: #FFC;
margin: 0px;
padding: 0px;
float: left;
height: 100%;
width: 200px;
position: relative;
visibility: visible;
}

.navbar{
background-color: #FC6;
width: 200px;
border: 2px solid #000;
}

.navbar ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.navbar a{
font: bold 14px Verdana;
display: block;
width: 100%;
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}

.navbar a:visited{
color: #595959;
}

.navbar a:hover{
background-color: #C90;
color: black;
width: auto;
}

.navbar a.selected {
color: #0F3;
background: #5D0C0C;
width: auto;
}

Visisted a friend earlier;
still running XP with IE6. So even if IE6 is down to 10% of users globally as stated by johnmoss
http://www.dreamweaverclub.com/forum/showthread.php?t=40082
and
http://marketshare.hitslink.com/report.aspx?qprid=3&qpcustom=Microsoft+Internet+Explorer+6.0
i would still like IE6- / XP-users (larger companys and private pc's with cracked software) beeing able to wiev content of websites as layed out intentionally. Anyway, seems like the IE "dysfunctional" attitude is continuieng in IE9?

DWcourse
05-11-2011, 09:14 PM
Any chance you could post the page somewhere? It's a lot easier to look at it when it's online.

henryhayes
05-11-2011, 09:17 PM
Ok. have to upload- only tested locally / pc so far. But IE7 problemos already..

henryhayes
05-12-2011, 07:59 PM
Ive uploaded code here. IE7 expands vertically..

http://www.byenshjemmesider.dk/

DWcourse
05-12-2011, 08:28 PM
Not sure if this is it but you need to do it anyway. Remove the width properties from the .navbar a and .navbar a:hover rules. Items with the display property set to block by default fill the full width of their containers so a width is redundant. Also using 100% width with padding makes the items larger than its container (you can see the bottom border hanging out to the right).

henryhayes
05-13-2011, 07:52 PM
Removing the widht as suggested by DWCourse actually solved the expand-issue in IE7. Thanks, that navbar is slowly gettinbg there!

However it all blows up when testing in IE 5.5 and IE6 with IEtester. In IE 7 and 8 the size of the navbar is not the same, but thats a minor problem.

Can't say im surprised that the navbar looks different in all 4 browser-versions.
But id still like it to look right in at least IE6?
I expect its to do with padding and IE6 doubling the values..

Heres the screenshots (uploaded to Imageshack; not sure if this displays correctly in the post):

IE 5.5
http://imageshack.us/photo/my-images/36/ie55.jpg/

IE 6
http://imageshack.us/photo/my-images/714/ie6b.jpg/

IE 7
http://imageshack.us/photo/my-images/268/ie7pp.jpg/

IE 8
http://imageshack.us/photo/my-images/689/ie8s.jpg/

henryhayes
05-13-2011, 07:59 PM
this post went wrong

henryhayes
05-13-2011, 08:06 PM
Inserting photos didnt work. Ill post links to screenshots instead.

All 4 screenshots were captured with the same width and height except IE 5.5 where the nav.wrapper explodes vertically.

IE 5.5
http://imageshack.us/photo/my-images/36/ie55.jpg/http://img36.imageshack.us/img36/4945/ie55.jpg

IE 6
http://imageshack.us/photo/my-images/714/ie6b.jpg/http://img714.imageshack.us/img714/7540/ie6b.jpg

IE 7
http://imageshack.us/photo/my-images/268/ie7pp.jpg/http://img268.imageshack.us/img268/9726/ie7pp.jpg

IE 8
http://img689.imageshack.us/img689/576/ie8s.jpg

domedia
05-16-2011, 02:27 PM
Unless you can verify by server stats that any of your audience is using IE 5.5 I would just forget it. The same goes for IE6.

DWcourse
05-16-2011, 08:16 PM
Personally I would forget about about IE5.5 and 6 period. It's hard to think of situation where those few, neanderthals would be a profitable audience to target.

gentleone
05-16-2011, 10:03 PM
Yep... I agree. Don't waste your time on those ancient browsers.
http://www.theie6countdown.com

domedia
05-17-2011, 03:07 PM
Yep... I agree. Don't waste your time on those ancient browsers.
http://www.theie6countdown.com

What is that little green colored country with 0.5%? 8)

henryhayes
05-17-2011, 11:39 PM
You're right. Being curious:

A box showing up on IE6-visitor's screen pointing to a browser-update is possible using PHP?

Tried to google that solution; no working code though. Anyone know how to do it? Seems like PHP goes straight into the body of HTML and can be styled using div..

This question ought to go elsewhere than CSS styling forum, but now im at it

edbr
05-18-2011, 12:42 AM
you can do a check for browser and then if ie6 echo a message , you might be better using a javascript solution though

DWcourse
05-18-2011, 12:58 AM
A CSS-based solution would be a div with display none and then use a conditional to display it only in IE6.

domedia
05-18-2011, 12:54 PM
Remember PHP runs on the server, so no PHP is sent to the browser.

henryhayes
05-22-2011, 07:15 PM
Keeping it strictly HTML / CSS, as proposed by DWCourse, the box showing visitors using IE6 or earlier to upgrade browser, can simply be done with a div positioned absolutely, huge amount of z-indeks and the conditional comment redirecting visitor to the IE6-stylesheet.

Thx to all for inputs on this post and especially DWCourse who clarified issues