CSS problem

N

nomak

Limp Gawd
Joined
Oct 20, 2004
Messages
419
I created a css button style for my links inside a menu.. I have a border around these buttons but it is also affecting the Mapquest button/link that is not in the menu.. Is there any way I can exclude this mapquest from getting the border that I have intended for my link in my menu on the left side of page.. thanks..



http://home.comcast.net/~national.web/Directions.html
 
You can use a specific link class.
a:link {
text-decoration: none;
}

<a href="link.html"> <img src="image.gif" class="link">

text-decoration: none removes the border, a:link creates a different class for anchors.
 
FYI, Your buttons overlap and don't render properly in FF2.0..works fine in IE7, as I'm sure you're aware.
 
Shame shame .. it is a good combo to use (I don't use IE directly, usually FF and the IEView extension if I need IE) :D
 
use descendant selectors like so:

Code: 
#menu a {
margin: 5px 0px;
width: 125px;
border: black 5px outset;
padding: 2px;
text-decoration: none;
text-align: center;
font: normal 15px Verdana;
color: black;
}

#menu a:active 
{
padding: 2px;
text-decoration: none;
}

this means that only the links in your menu div will be styled using the above properties and values.

of course if you want to style links in other parts of your page you'll have to do the same thing as above, like so:

Code: 
#content a {

}

#content a:active {

}

or you could just use classes but this is a little bit more organised in my opinion

also, if you're going to use a doctype, please use the whole thing:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

and finally, please use an external css file instead of an embedded style sheet...it'll make developing/maintaining your site a lot easier :D

and as for developing/testing a site in Firefox or IE, you should be doing both
 
thanks for your help. I will try the above changes to my css code.. I will also be installing FF to double check my work as well.. thanks again..
 
When I use the full DOC type as you have shown below it makes all the buttons run together but if I just use the <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" part it works fine .. not sure about in fire fox.. have to install it yet to see..



=Vector= said:
use descendant selectors like so:

Code: 
#menu a {
margin: 5px 0px;
width: 125px;
border: black 5px outset;
padding: 2px;
text-decoration: none;
text-align: center;
font: normal 15px Verdana;
color: black;
}

#menu a:active 
{
padding: 2px;
text-decoration: none;
}

this means that only the links in your menu div will be styled using the above properties and values.

of course if you want to style links in other parts of your page you'll have to do the same thing as above, like so:

Code: 
#content a {

}

#content a:active {

}

or you could just use classes but this is a little bit more organised in my opinion

also, if you're going to use a doctype, please use the whole thing:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

and finally, please use an external css file instead of an embedded style sheet...it'll make developing/maintaining your site a lot easier :D

and as for developing/testing a site in Firefox or IE, you should be doing both
Click to expand...
 
ok I made some changes to the page in question .. it works in IE7 but not FF.. the buttons overlap in FF.. it also passes the HTML validation at web consortium.. What is it that differs from FF to IE7 thats not allowing my CSS code to render properly with FF ??? Should I just put a notice that says best viewed with IE7 ?>?? :p :p

Thanks guys...


P.S. I got FF installed where do I get the additional plugins that have been mentioned above.. Im not a FF fan myself but would like my pages to be compatible in both browsers..

P.S.S. if I put the full DOC type" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">"
at the begining of my page it dosent work properly in IE7.. not sure what causes this either..
 
nomak said:
P.S.S. if I put the full DOC type" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">"
at the begining of my page it dosent work properly in IE7.. not sure what causes this either..
Click to expand...

A doctype changes the rendering mode in IE from Quirks to Standard. Always make sure you have a doctype in your HTML before you actually start coding anything, that way you're developing for standards mode.
 
well i fixed the links in the menu, here is the new code:

CSS code
NOTE: this replaces all of your #menu div code
Code: 
#menu {
	position: absolute;
	width: 180px;
	left: 20px;
	padding: 10px;
	background-color: #F5F5F5;
	border: solid 2px #333333;
	text-align: center;
}

#menu ul {
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-family: Verdana;
}

#menu ul li {
	margin: 0 0 5px;
	padding: 0;
	list-style-type: none;
}

#menu ul li a {
	text-decoration: none;
	color: black;
	border: 5px outset black;
	display: block;
	height: 1%;
	padding: 1px 0;
}

#menu ul li a:hover {
	color: blue;
}

You'll notice i used :hover instead of :active, the way you were using it was redundant because the properties and values you used were already inherited anyway so with or without the code it would have looked the same. I'm not sure if you are familiar with :hover but it basically means that when the cursor hovers over a link it changes based on what properties and values you use, whereas :active only works when a link is clicked on. if you don't want the :hover in there you can get rid of it if you want.

HTML code:
NOTE: this replaces all of the menu links
Code: 
<ul>
	<li><a href="contact.html">Contact</a></li>
	<li><a href="services.html">Services</a></li>
	<li><a href="machinery.html">Machinery</a></li>
	<li><a href="products.html">Products</a></li>
	<li><a href="index.html">Home</a></li>
</ul>

Now, there were quite a few errors in your page that i didn't touch, mainly because you really needed to get that menu fixed first before doing anything else. If you want me to show you an alternative way of making a two column page, just ask.
 
thanks vector.. I will work with the menu errors first before I dig into the others.. and thanks for looking at the code and making changes to it for me. I will implement them into my page later tonight and see how it goes..


Thanks
 
You must log in or register to reply here.
Back
Top