4 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

Hi..

I'm working on fixing the different width's put out by different browsers when declaring padding in a div...

here's a sample of what i'm talking about.

The following is a list that forms the paramaters for the main navigation.

.nav {
	
	
	padding-top: 20px;
	width: 130px;

	width/* */:/**/110px; 
  	width: /**/110px;

	float: left;
	border:none;
	
	background-color: #DFE0CE;
	
	
}



.topnav {
	margin: 0px;
	padding: 0px;
	border-right: 1px solid black;	
	background-color: #DFE0CE;
 
}



.topnav ul{
		
	list-style: none;
	margin: 0px;
	padding: 0px;
	border-bottom-width: 0px;
	border-bottom-style: none;
}

.topnav li {
	border-bottom-width: 0px;
	border-bottom-style: none;
	margin: 0px;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	border-top-width: 0px;
	border-top-style: 0px;
}


.topnav li a {
	display: block;
	color: #000000;
	text-decoration: none;
	width: 100%;
	margin: 0px;
	padding-top: 1px;
	padding-left: 5px;
	padding-bottom: 1px;
}

html>body .topnav li a {
	width: auto;
}


.topnav li a:hover {
	background-color: #ACADA1;
	color: #000000;
	margin: 0px;
	padding-top: 1px;
	padding-left: 5px;
	padding-bottom: 1px;
	border: none;

}

I use a hack in the first div to correct the padding issue.. however it results
in large space being added to the actual page.

check it out here.

[url]
http://www.mandaraxweb.com/delnew/delnew/index3.php
[/url]

Maybe someone can give me some hints on what i'm doing wrong..

:?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?:

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 9 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Help with box model hacks...

I am not sure about this but I thought the box model hack would be required only if you have a padding or border for the box which affects the width of the box. Have you tried this:

.nav {     
   padding: 20px 0 0 0; 
   width: 130px;  /*change this to the required actual width*/
   float: left; 
   border:none; 
   background-color: #DFE0CE; 
}

In your case you don't have a padding or border which is affecting the width of the box

http//melbourne.ug.php.net

Anonymous
Anonymous's picture
Guru

Woah... i must have been tired.

Okay so obviously i was up late last night..

The problem that i'm talking about is a width issue in IE 5.0/.5 Win

Check out the screenshot i uploaded and compare it with this link..

[url]
http://www.mandaraxweb.com/delnew/delnew/index3.php
[/url]

I can't find my problem.. I think it may be the padding used in
the linking .. ??

Anonymous
Anonymous's picture
Guru

Fixed...

Thanks for your help!! That was just a stupid mistake.

This place is cooool.

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 9 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Help with box model hacks...

I guess you have to be registered to upload a screenshot. A screenshot would definately help in comparing what you see in IE 5.x and other browsers.

http//melbourne.ug.php.net