Bizarre CSS Problem

Barks

Barks

Barks

Soldato
Joined
20 Jul 2008
Posts
4,422
Thought I might ask on here in case someone knows what I'm going through. I'm fairly new to CSS but I've picked it up quickly. My layout looks perfect on Safari, Chrome and modern versions of IE but unfortunately my client uses an ancient version of IE and it looks awful.

I've set up some divs with ID styles for two unique buttons:

}
#button2 {
width: 500px;
margin-right: auto;
margin-left: auto;
}
#button3 {
width: 300px;
margin-right: auto;
margin-left: auto;
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
height: 32px;

}


#button3 a:link, a:visited {
color: #FFF;
display: block;
padding: 5px;
background-image: url(../images/graphics/graphic2.jpg);
background-repeat: no-repeat;
text-decoration: none;
height: 32px;
}
#button3 a:hover, a:active {
color: #FFF;
background-image: url(../images/graphics/graphic2alt.jpg);
background-repeat: no-repeat;
}






#button2 a:link, a:visited {
color: #1E5EA9;
text-decoration: none;
display: block;
padding: 5px;
background-color: #F0F0F0;
border: 1px solid #EBEBEB;
}
#button2 a:hover, a:active {
color: #FFF;
background-image: url(../images/graphics/graphic1alt.png);
background-repeat: repeat;
Click to expand...

Button 3 is a curved off button with 2 images, one to illuminate it, exactly 300x32

Button 2 is similar but simply uses CSS to shade the button over when the mouse curser hovers over it.

Problems:

  1. Now for some reason in Internet Explorer it is randomly throwing the Button 3 image/shape all over other pages where only the Button2 DIV is present.
  2. The actual text colour for the links in Button 3 isn't behaving. It should be white yet sometimes when I preview the site it goes back to blue. Note how I have put color: #FFF in the properties in CSS for the links, yet for some reason it is being overwritten by something else.

Based on these two problems, it's difficult to explain but it's as if there's some leakage between the two conditions for Button 2 and Button 3!

I don't expect anyone to have answers for these unless there's a common problem I'm missing.

Cheers
 
Last edited:
Can you post the HTML or is it that the ID's are anchors?

Also if you're wanting rounded corners then it's best to leave it to CSS and if the client is using an older browser (I mean really get with the times) then just leave it squared as it can still look asthetically pleasing.
 
Varsh said:
Can you post the HTML or is it that the ID's are anchors?

Also if you're wanting rounded corners then it's best to leave it to CSS and if the client is using an older browser (I mean really get with the times) then just leave it squared as it can still look asthetically pleasing.
Click to expand...

I wasn't aware CSS could do rounded corners!

I'm using Templates in Dreamweaver, he's an example code from one page:
(The one where IE throws up the button3 shape in the middle of the page)

<h1>Services</h1>
<p class="aligncenter">&nbsp;</p>
<div id="button2">
<a href="services1.html">Physiotherapy</a>
<a href="services1.html#medicals"> Medicals</a>
<a href="services1.html#counselling"> Counselling</a>
<a href="services1.html#asthma"> Asthma Clinic</a>
</div>
 
Ok now I can see some problems, I'll ignore the images for now but clean up the rollovers. I'll make the text change to a different colour (like pink) so you can see that it's taking affect.

Edit: Actually I would do this differently by using a list instead of a DIV as you'll have a lot more control.
 
Last edited:
How do you mean? I don't see anything wrong with that code.

The #tags goto anchors within the services1.html page.
 
CSS
PHP: 
#menu {
	display: block; /* Makes it behave like a DIV by having it take the whole width of the screen and allows for better formatting */
	list-style: none; /* Remove the dots */
	margin: 0px; /* Let's the menu have no gap around its border*/
	padding: 0px; /* Removes the list dots to the left and also makes everything fit next to each other */
	width: 500px;
}
#menu li {
	background: #900;
	padding: 5px 10px 5px 10px; /* Padding the text away from the edges and rounded corners starting from the top and going clockwise */
}
#menu li:first-child { /* Affect only the first list element */
	border-radius: 10px 10px 0 0; /* This makes the corners round starting with the top left and going clockwise */
}
#menu li:last-child { /* Affect only the first list element */
	border-radius: 0 0 10px 10px; /* This makes the corners round starting with the top left and going clockwise */
}
#menu li a {
	text-decoration: none;
}
#menu li:hover, li a:hover, li a:active {
	color: #000;
	background-color: #90F;
}
#menu li a:link, li a:visited {
	color: #FFF;
}


HTML
PHP: 
<ul id="menu">
	<li><a href="Untitled-1.html">Physiotherapy</a></li>
	<li><a href="Untitled-1.html#medicals"> Medicals</a></li>
	<li><a href="Untitled-1.html#counselling"> Counselling</a></li>
	<li><a href="Untitled-1.html#asthma"> Asthma Clinic</a></li>
</ul>
If you want to still use image backgrounds then just change "background" to "backgorund-image" as you know. As you can see with lists there's more control on where I want to have the rounded corners. If you want rounded corners on all of the list items then all you need to do is remove the "first child" and "last child" elements and just pop the rounded corner CSS into the standard list element.

Another reason for putting this all into a list is not just the control but also organisation, it's easier to spot a menu in your code with a list as well as cleaner.
 
Firstly thank you very much for doing that.

I've got it working and styled as I want and I agree I think this is a far superior way of doing what I want. However, I still cannot get the text of the link to go white. There must be something in the CSS that is making all links within the entire page go blue.

I think I might re-design the site from scratch as the code and CSS code has got very messy!
 
There is a quick fix for that by doing this in the CSS:
PHP: 
a {
    color: #FFF;
}
This will mean that all the links on the page will be white though. You can then get around that by doing this:
PHP: 
# or .ELEMENTNAME > a {
    color: #COLOUR;
}
 
Last edited:
Sorry I've only recently started learning CSS so I'm slow.

Code: 
#menu > a {
	color: #FFF;
}

This doesn't seem to work either.

I don't understand why it doesn't just obey the text colour rule as follows:

Code: 
#menu li:hover, li a:hover, li a:active {
	color: #FFF;
	background-image: url(../images/graphics/graphic1alt.png);
	background-repeat: repeat;
}
 
Are you using my settings? If so you would want to put the colour then in the "#menu li a" element.

"#menu > a" won't work as it means that it will only affect anchors directly after the MENU element, in which case is "UL" and no "LI".

Don't worry if you're just starting, we all have to start somewhere and you're willing to learn. :)

Edit: Just thought of another workaround for your problems. If you remove all of the font colours for the anchors in your CSS then do this at the top of the CSS instead:
PHP: 
a {
    color: #FFF;
}
a:link, a:visited {
    color: #FFF;
}
a:hover, a:active {
    color: #000;
}
 
Last edited:
I see that changes the colour of the link which is fine. So I want that colour to be blue as my background colour is a very light shade of grey.

When hovering over, the button loads a background image which is a gradient shade of dark blue. I then want the text to go white but it seems to stay dark blue.

Code: 
#menu li a {
	text-decoration: none;
	color: #006;
}


#menu li:hover, li a:hover, li a:active {
	color: #FFF;
	background-image: url(../images/graphics/graphic1alt.png);
	background-repeat: repeat;
}
 
Just realised that I made a slight mistake myself. Remove the "li a:visited" and do this:
PHP: 
#menu li:hover, #menu li a:hover, #menu li a:active {
	color: #000;
	background-color: #90F;
}
#menu li a:link {
	color: #FFF;
}
Obviously making changes where you need it. It's the visited anchor that's causing the problems.
 
That fixes it but now everything is underlined despite me putting 'text-decoration: none;' in virtually every CSS code.

I'm going to start from fresh now as everything is too much of a mess.
 
If you're not going to have any text decoration in any anchor element on the entire page then just do this:
PHP: 
a {
    text-decoration: none;
}
 
Thanks for your help mate, I got it working nicely which is brilliant.

Can I ask one last quick question though. On my original website I had a Spry Bar for the top navigation menu. I decided this is overkill and want to make do without it for the new site I'm designing from the ground up.

So I have a wrapper div then:

- Logo Div (150x900 pixels)
- Nav Div (30x900)
- Main Div (editable region)

I'm trying to get a horizontal menu in the Nav div. I have my background image for the entire bar which is a blue gradient. I then want it so when I hover my mouse over each link (I'm using block-inline) it illuminates to an alternate background colour. Now I've got this working fine using the following code:

Code: 
#navbar {
	/* [disabled]height: 30px; */
	width: 100%;
	background-repeat: repeat-x;
	background-image: url(../graphics/graphic1.png);
}

#navbar a {
	color: #FFF;
	text-decoration: none;
	display: inline-block;
	font-size: 15px;
	padding: 10px;
}

#navbar a:hover, a:active {
	background-image: url(../graphics/graphic1_sel.jpg);
}

Without going into detail, I'm having a nightmare trying to get the 'green' hover shade to line up nicely. I also can't get the text to vertically align in the middle. If I try and use padding it ends up rendering the hover image above and below the actual nav div itself.

Is there an easy solution to this?

CSS is so simple yet so unbelievably confusing :D
 
Actually I've somehow managed to get it working now.

By removing the height from the nav div it seems to work and the padding of 10px all round makes the text appear in the center

:)
 
Glad to have been of help. :)

Sorry about the late reply as I've been fitting a new PC together. Now I need food!

If you need any help then I'll be glad to help further. Just a shame that IE6 doesn't support HTML5 and CSS3 then your life would be further easier. :D
 
I really appreciate it mate.

The only problem I'm still encountering is when I hover the mouse over the button, the background indeed changes to 'illuminate' it. However, the actual text only goes white when I hover the cursor over it. Hmmm.

This is what I've ended up with in CSS:

Code: 
#buttona {
	display: block; /* Makes it behave like a DIV by having it take the whole width of the screen and allows for better formatting */
	list-style: none; /* Let's the menu have no gap around its border*/
	padding: 0px; /* Removes the list dots to the left and also makes everything fit next to each other */
	width: 500px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-decoration: none;
}
#buttona li {
	padding: 5px 10px 5px 10px;
	background-color: #FCFCFC;
}



#buttona li:hover, #buttona li a:hover, #buttona li a:active {
	color: #FFF;
	background-image: url(../graphics/graphic1.png);
	background-repeat: repeat;
}




#buttona a:link {
	text-decoration: none;
	color: #265EAD;
}

Also wanted to ask you what the best way of doing a simple button is?

List again but only one item?
 
Last edited:
If it's a single button then a single anchor would be fine, just give the anchor an ID and you wouldn't need to use a DIV element.

If you want it so that the whole button is highlighted then remove the padding and background colour/images from the LI element and put them in the A element so it should be something like this:
PHP: 
#buttona li a {
    color: #265EAD;
    padding: 5px 10px 5px 10px;
    background-color: #FCFCFC;
}
#buttona li a:hover{
    color: #FFF;
    background-image: url(../graphics/graphic1.png);
    background-repeat: repeat;
}
#buttona li a:link {
    color: #265EAD;
    padding: 5px 10px 5px 10px;
    background-color: #FCFCFC;
}
That should do it. :)
 
You must log in or register to reply here.
Back
Top Bottom