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:
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>
 
How do you mean? I don't see anything wrong with that code.

The #tags goto anchors within the services1.html page.
 
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!
 
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;
}
 
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;
}
 
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.
 
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

:)
 
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:
I still can't get it to work, I'm going to stick with the code quoted in my last post as that does half the job. I'm just about ready to cry I've been working on this all day and whilst the website looks fantastic I still just don't get the code behind it.

I have no idea what the difference between li a. li a:link. a:link etc :(

I tried this but it doesn't work...
#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 a {
color: #265EAD;
padding: 5px 10px 5px 10px;
background-color: #FCFCFC;
}

#buttona li a:link {
color: #265EAD;
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;
}
Click to expand...
 
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.
Click to expand...

How do I create a custom tag for CSS.

So say I have a link on a page and I want it to have its own unique properties, how do I apply a tag such as the #buttona we've been looking at.
 
I thought <a> was by nature something to do with links.

Are you saying I could have <b> or <c> or <d>.

Classes is what I used to solve the problem.
 
Finally found the root of all my problems!

This is correct:
Code: 
#buttonb a:link, #buttonb a:visited {
	text-decoration: none;
	color: #FFF;
}

but I was - in some cases - doing this:

Code: 
#buttonb a:link, a:visited {
	text-decoration: none;
	color: #FFF;
}

Hence why I had conflicting CSS rules and a living nightmare trying to get the links to work properly!!!

The website looks gorgeous now, very pleased with myself. Thanks again for your help Varsh.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom