CSS Forum

**cchase88** · 06-27-2010, 11:49 PM

Hey everyone, I've been working on a site and have tested it with no problems using Firefox, Opera, Chrome, Safari and IE8 all of which were on Windows. However, when I tested the site using Firefox on Linux, I ran into the following problem:

Here's the page using Opera in Linux and how the page looks on the rest of the browsers as well:

I'm not sure exactly what's happening, but here is my CSS for the navigation bar:

Code:

#navigation ul {
	list-style-type: square;
	list-style-position: inside;
	padding: 0;
	margin: 0;
	height: 30px;
	background: #024A68;
	color: #FF8700;
	font-size: large;
}

#navigation ul li {
	float: left;
	margin-left: 0px;
	width:  145px;
	padding: 4px 0;
	border-right: 2px solid #fff;
	text-align: center;
}

#navigation ul li a {
	display: block;
	padding: 0 10px;
}

#navigation ul li a:link {
	text-decoration:none;
	color: #fff;
}

#navigation ul li a:visited {
	text-decoration:none;
	color: #fff;
}

#navigation ul li a:hover {
	text-decoration:underline;
	color: #63AFD0;
	
}

#navigation ul li a:active {
	text-decoration:underline;
	color: #63AFD0;
}

If anyone could give me some pointers as how I should go about cleaning up or altering this CSS so as it would fix the aforementioned problem, I'd very much appreciate it. Thanks!

**LadynRed** · 06-28-2010, 09:30 AM

We really need a URL to the problem site, or you need to post ALL of the html and css.

**Phunk Rabbit** · 06-28-2010, 10:40 AM

You may find that using an image (rather than list-style) is better for consistancy in dot size, you will find some brousers interprite the list-style element size differently.

Also, you can combine some of those classes together (the ones that are being given the same content), example:

Code:

#navigation ul li a:link {
	text-decoration:none;
	color: #fff;
}

#navigation ul li a:visited {
	text-decoration:none;
	color: #fff;
}

#navigation ul li a:hover {
	text-decoration:underline;
	color: #63AFD0;
	
}

#navigation ul li a:active {
	text-decoration:underline;
	color: #63AFD0;
}

becomes:

Code:

#navigation ul li a:link,#navigation ul li a:visited {
	text-decoration:none;
	color: #fff;
}

#navigation ul li a:hover,#navigation ul li a:active {
	text-decoration:underline;
	color: #63AFD0;
}

**cchase88** · 06-28-2010, 10:51 AM

Quote:

Originally Posted by LadynRed

We really need a URL to the problem site, or you need to post ALL of the html and css.

Sorry about that. I don't have the site on a production server yet, so I'll just post the html

HTML Code:

<!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" xml:lang="en" lang="en">
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Company Name</title>
<link rel="stylesheet" type="text/css" href="styles/main.css" />

</head>
<body>
	<div id="container">
		<div id="header">
			<a  href="#" title="Home">Company Name</a>
		</div>
		
		<div id="navigation">
			<ul>
				<li><a href="#" title="Go to the home page">Home</a></li>
				<li><a href="#" title="View our portfolio">Portfolio</a></li>
				<li><a href="#" title="Read about our current projects on our blog">Blog</a></li>
				<li><a href="about.html" title="About Us">About</a></li>
			</ul>
		</div>
				
		<div id="main">
			<div id="left">
				<h1>Web Design</h1>
				<p>Fusce nisi neque, imperdiet et consectetur in, luctus eu mi. Mauris ultricies, sem nec luctus volutpat, justo quam imperdiet nisl, vel laoreet erat nisl eget leo. Maecenas viverra orci magna, in malesuada eros. Donec leo nulla, iaculis sed eleifend quis, commodo ac enim. Morbi volutpat vulputate mattis. Suspendisse non elit tellus, a interdum dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque metus erat, interdum ac vestibulum imperdiet, aliquet nec ligula. Mauris eleifend interdum velit, at elementum libero pharetra sed. Nullam molestie metus vitae eros consectetur condimentum. Morbi nec nunc felis, eget scelerisque sapien. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sagittis purus id nulla laoreet tempus. Morbi congue, nisi bibendum lobortis gravida, lorem diam blandit leo, non egestas tellus massa non ligula. In feugiat, leo at mollis adipiscing, diam turpis viverra erat, vel semper nisl massa ut lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque justo est, malesuada ut pretium a, suscipit at erat. 

				Aliquam imperdiet lorem vel tellus dictum aliquam. Cras condimentum nibh eget dui tincidunt molestie. Praesent ut lectus nulla, ut varius diam. Pellentesque vehicula pretium lorem a molestie. Integer pellentesque varius urna, at vehicula eros vulputate vel. Nam est erat, adipiscing pellentesque lobortis ultricies, ullamcorper eu augue. Nulla semper mauris tellus. Praesent neque mauris, dapibus aliquam porttitor sed, blandit pulvinar nunc. Vestibulum sem magna, lacinia eu dignissim aliquam, porta ac orci. Vivamus nec massa pulvinar velit elementum luctus.</p>
			</div>
			
			<div id="right">
				
				<h3>Right Heading</h3>
				
				<p>Aliquam imperdiet lorem vel tellus dictum aliquam. Cras condimentum nibh eget dui tincidunt molestie. Praesent ut lectus nulla, ut varius diam. Pellentesque vehicula pretium lorem a molestie. Integer pellentesque varius urna, at vehicula eros vulputate vel. Nam est erat, adipiscing pellentesque lobortis ultricies, ullamcorper eu augue. </p>
			
				<div id="rightnav">
					<ul>
						<li><a href="contact.html" title="Contact">Contact</a></li>
						<li><a href="#" title="Something else">Another Link</a></li>
						<li><a href="#" title="Another Link">Lorem</a></li>
						<li><a href="#" title="Another Link">Ipsum</a></li>
					</ul>
				</div>
			
			</div>
		</div>
		<div id="footer">
			<p>
				<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
			    <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a>
			</p>
		</div>
	
	</div>

	
</body></html>

**Phunk Rabbit** · 06-28-2010, 10:54 AM

and all the CSS please cchase88.

Also, quick note. You can also use the <ul> as the navigation section, rather than wrapping it in a div.

**cchase88** · 06-28-2010, 10:58 AM

Quote:

Originally Posted by Phunk Rabbit

and all the CSS please cchase88.

Also, quick note. You can also use the <ul> as the navigation section, rather than wrapping it in a div.

Sorry again, just got up

. Also, thank you for the tip about combining selectors. I haven't altered this CSS to reflect that yet...

HTML Code:

body {
	margin: 0;
	padding: 0;
	color: #000;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}

#container {
	width: 780px;
	margin: 0 auto;
}

#header {
	height: 75px;
	background: #0772A1;
	border-bottom: 5px solid #fff;
	/*border-top: 10px solid #fff;*/
	
}

#header a {
	font-size: 2em;
	float: left;
	width: auto;
	padding: 15px 400px 15px 10px;
	
}

#header a:link {
	text-decoration:none;
	color: #fff;
}

#header a:visited {
	text-decoration:none;
	color: #fff;
}

#header a:hover {
	text-decoration:underline;
}

#header a:active {
	text-decoration:underline;

}

#navigation ul {
	list-style-type: square;
	list-style-position: inside;
	padding: 0;
	margin: 0;
	height: 30px;
	background: #024A68;
	color: #FF8700;
	font-size: large;
}

#navigation ul li {
	float: left;
	margin-left: 0px;
	width:  145px;
	padding: 4px 0;
	border-right: 2px solid #fff;
	text-align: center;
}

#navigation ul li a {
	display: block;
	padding: 0 10px;
}

#navigation ul li a:link {
	text-decoration:none;
	color: #fff;
}

#navigation ul li a:visited {
	text-decoration:none;
	color: #fff;
}

#navigation ul li a:hover {
	text-decoration:underline;
	color: #63AFD0;
	
}

#navigation ul li a:active {
	text-decoration:underline;
	color: #63AFD0;
}

#main {
	padding-top: 60px;
	clear: both;
	margin-bottom: 40px;
}

#main p {
	padding:0 15px;
}

#left {
	float: left;
	width: 70%;
	padding: 10px;
}

#right {
	margin-left: 70%;
	padding: 10px;
	border-left: 2px dotted #FF8700;
}

#right h3 {
	margin-top: 20px;
}

#rightnav ul {
	list-style-type: square;
	list-style-position: inside;
	padding: 0;
	margin: 0;
	background: #024A68;
	color: #FF8700;
	font-size: medium;
}

#rightnav ul li {
	
}

#rightnav ul li a {
	text-decoration: none;
	color: #fff;
}
	

#footer {
	clear: both;
	border-top: 10px solid #63AFD0;
	background: #024A68;
	color: #fff;
	text-align: center;
	
}

.left {
	float: left;
	padding: 20px;
}

.right { 
	float: right;
}

**Phunk Rabbit** · 06-28-2010, 11:03 AM

I cant run the files locally atm since im at work, however, you can try using the anchor for all the padding, width and height rather than applying this to the li, this will also give you a larger clickable area for the users.

If you dont want all the tabs to be the same width you could also just give each <a> a padding value and leave the width, somtimes makes for a cleaner approach.

**cchase88** · 06-28-2010, 11:08 AM

Quote:

Originally Posted by Phunk Rabbit

I cant run the files locally atm since im at work, however, you can try using the anchor for all the padding, width and height rather than applying this to the li, this will also give you a larger clickable area for the users.

If you dont want all the tabs to be the same width you could also just give each <a> a padding value and leave the width, somtimes makes for a cleaner approach.

Thanks Phunk Rabbit, I'll look into putting some of that styling in the anchor tag like you suggested.

**cchase88** · 06-28-2010, 01:16 PM

Ok, I got it working.

I went through my CSS and tried changing the padding and margins that had to deal with the <li>'s and the <a>'s in the navigation bar. I was still facing the same problem so I decided to change the <a>'s display type back to inline (I had set it to block so it would fill the entire <li>). That fixed the problem, but like I said, I wanted the anchors to fill the entire list-item so I changed it back to block and decided to change the list-style-position to outside. That fixed it and I got to keep my links displaying as block elements.

I also followed your recommendation about condensing the CSS. Thanks for your help!

**Phunk Rabbit** · 06-29-2010, 04:15 AM

Your welcome, glad you got it sorted.