Padding issue? - Firefox and IE give different results

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Padding issue? - Firefox and IE give different results

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> Padding issue? - Firefox and IE give different results

Page: [1]

FlowerPower

Posts: 67
Joined: 4/27/2004
Status: offline

Padding issue? - Firefox and IE give different results - 7/14/2005 7:58:48

Hi, I have made a navigation bar which works fine, except the text is well centered inside the bar in IE but not in Firefox. I attempted to play around with the padding inside the bar, but it doesn't seem to be working. Maybe my approach is wrong?

Here's the css:

/* ##### HORIZON: STARTING POINT FOR VERTICAL CENTERING ##### */
#horizon {
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block;
}

/* ##### NAVIGATION BAR ##### */
#navbar {
	position: absolute; 
	top: -20px; 
	width: 100%;
	height: 35px;  
	background-image: url('images/navbar_bg.gif');
	background-repeat: repeat-y; 
	text-align: center;
	color: #fff;
	visibility: visible;
	display: block;
  	font-size: 14px; 
  	font-weight: bold; 
  	text-decoration: none; 
  	margin: 0; 
  	padding: 1ex 20px;
	border-style: solid;
  	border-top-width: 2px; 
  	border-bottom-width: 2px; 
  	border-left-width: 0px;
  	border-right-width: 0px; 
  	border-color: #000;
}

In the picture below, you can see the end result in the two browsers:

Would love to have some help.
Thanks!

Thumbnail Image

Attachment (1)


FlowerPower Posts: 67 Joined: 4/27/2004 Status: offline	RE: Padding issue? - Firefox and IE give different results - 7/14/2005 8:02:50 Hm, I meant of course vertically centered. The text is sort of bunched up towards the top of the bar when viewed in Firefox. (For some reason I couldn't edit the above post - maybe slow because of the attached image file). (in reply to FlowerPower)


Tailslide Posts: 6269 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	RE: Padding issue? - Firefox and IE give different results - 7/14/2005 8:13:59 Something that's worked for me in the past would be to do away with the top/bottom padding leaving just left and right and then use line-height at the height of the div - 35px in this case. See if that works at all. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to FlowerPower)


FlowerPower Posts: 67 Joined: 4/27/2004 Status: offline	RE: Padding issue? - Firefox and IE give different results - 7/14/2005 8:40:07 Hm, line-height - I didn't know about that one, but will certainly try.... <fiddles with the keyboard for a minute> Yup, that did the trick. Thanks once again, Tailslide! (in reply to Tailslide)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets >> Padding issue? - Firefox and IE give different results

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts