Solved Chrome, I hate you so much. [CSS]

September 28, 2012 at 10:30:39
Specs: Windows 7 64 bits
I have always had problems with Chrome, I have never created a website with 0 issues on Chrome and it's really getting annoying.

I think this picture describes pretty well why Chrome is so annoying.

http://i50.tinypic.com/2rmkz2w.jpg

My navigation bar is about 3 pixels too high and move gradually to the left on it's way to "Contact Us".

How do i fix this or is there a way to make 3 versions of the site and tell the browser : if it's chrome this url is home, if it's firefox this url is home etc..

Code :

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

<html>

<head>
	<title>My Shop</title>
	
	
	<style type="text/css">
		
		body {background-color:black;}
		
		#wrapper {margin:0 auto;width:1024px;}
		
		#nav_bar {position:relative;left:240px;width:730px;}
		#nav_bar li {position:relative;right:27px;top:-1px;display:inline;margin-left:25px;padding-right:-10px;padding-top:12px;padding-bottom:2px;}
		#nav_bar li a {border:1px solid white;border-bottom:0px;margin-right:-5px;text-decoration:none;color:white;font-family:Impact;font-size:1.5em;padding-left:5px;padding-right:5px;}
		#nav_bar li a:hover {background-color:#FE0101;color:black;border:1px solid red;}
		#nav_bar li:last-child a {margin-right:0px;}
		
		#search {position:relative;top:-43px;left:61px;width:195px;}
		#search input {background-color:white;color:black;font-size:14px;font-family:arial black;font-weight:bold;width:120px;border:0px;}
		#search button {background-color:red;color:white;font-weight:bold;border:0px;width:30px;padding-left:3px;font-family:Arial;font-size:14px;}
		#search button:active {color:black;}
		
		#content {position:relative;top:-37px;border:1px solid white;width:1024px;height:900px;}
		#content p{color:black;}
	</style>
	<script type="text/javascript">
	
	</script>
</head>

<body>
	<div id="wrapper">

		<ul id="nav_bar">
			<li> <a href="#">Home</a> </li>
			<li> <a href="#">Specials</a> </li>
			<li> <a href="#">New Products</a> </li>
			<li> <a href="#">Shopping Cart</a> </li>
			<li> <a href="#">Contact Us</a> </li>
		</ul>
		<div id="search">
			<input type="text" />
			<button onclick="search()">ok</button>
		</div>
		<div id="content">
			
		</div>
	</div>
</body>

</html>


See More: Chrome, I hate you so much. [CSS]

Report •


#1
September 28, 2012 at 13:50:57
Our company blocks tinypic.com so I can't see your jpg, but my first suggestion would be to wrap the nav_bar section in its own div and apply the css to the div. You should also fix the formatting of your css so that it's more readable and maintainable.

body {
    background-color : black;
}

#wrapper {
    margin : 0 auto;
    width : 1024px;
}

#nav_bar {
    position : relative;
    left : 240px;
    width : 730px;
}

#nav_bar li {
    position : relative;
    top : 27px;
    top : -1px;
    display : inline;
    margin-left : 25px;
    padding-top : 12px;
    padding-bottom : 2px;
}

#nav_bar li a {
    border : white solid 1px;
    border-bottom : 0;
    margin-right : -5px;
    text-decoration : none;
    color : white;
    font-family : Impact;
    font-size : 1.5em;
    padding-left : 5px;
    padding-right : 5px;
}

#nav_bar li a:hover {
    background-color : #fe0101;
    color : black;
    border : red solid 1px;
}

#nav_bar li:last-child a {
    margin-right : 0;
}

#search {
    position : relative;
    top : -43px;
    left : 61px;
    width : 195px;
}

#search input {
    background-color : white;
    color : black;
    font-size : 14px;
    font-family : arial black;
    font-weight : bold;
    width : 120px;
    border : 0;
}

#search button {
    background-color : red;
    color : white;
    font-weight : bold;
    border : 0;
    width : 30px;
    padding-left : 3px;
    font-family : Arial;
    font-size : 14px;

}

#search button:active {
    color : black;
}

#content {
    position : relative;
    top : -37px;
    border : white solid 1px;
    width : 1024px;
    height : 900px;
}

#content p {
    color : black;
}


Report •

#2
September 28, 2012 at 14:59:31
Nope, it's still the same but, i should start formatting my CSS this way and use external style sheets.

http://nonlocalhost.uphero.com/sigh...


Report •

#3
September 29, 2012 at 12:37:34
✔ Best Answer
The problem is position:relative; my navigation bar's starting point is different on Chrome.

position:absolute; fixes everything.


Report •
Related Solutions


Ask Question