Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Css help


  • Please log in to reply

#1
adamdillon

adamdillon

    Member

  • Member
  • PipPip
  • 67 posts
I have this website that i made for someone.

http://www.coxsgifts.com

I did it entirely in valid xhtml 1.0 and css. I used all div tags and now tables what so ever. Well in IE the site looks fine but when i open it in opera or firefox there is a gap below the left nav bar. I tried putting a wrapper around the whole box but that only solved the problem in IE. Any one know what i can use to solve this??? I have more sites that are like this and it would be a great help if someone knew. Thanks ahead.

Adam

Edited by adamdillon, 12 May 2006 - 11:32 AM.

  • 0

Advertisements


#2
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
Well if you over write #leftnav and #maincontent in you css the with what I have below it works ok. You have not got valid xhtml, you are serving it up as text/html which means it still is html with end tags added, even your doctype says it is html! And you would would break you site if your changed it!
#leftnav {
	display:table-cell; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 1em; PADDING-BOTTOM: 10px; WIDTH: 150px; PADDING-TOP: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #00cc99
}
* html #leftnav {
FLOAT: left;
}
#maincontent {
	display:table-cell; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 1em; PADDING-BOTTOM: 10px; BORDER-LEFT: #000000 thin solid; WIDTH: 608px; PADDING-TOP: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: auto; BACKGROUND-COLOR: #00cc99
}
* html #maincontent {
FLOAT: left;
}

Edited by Michael, 13 May 2006 - 05:51 AM.

  • 0

#3
adamdillon

adamdillon

    Member

  • Topic Starter
  • Member
  • PipPip
  • 67 posts
Ok well i will try this. but i ran my site through http://validator.w3.org/ and it said it is valid xhtml 1.0 transitional, but i will try it and get back to you to see if it works.
  • 0

#4
adamdillon

adamdillon

    Member

  • Topic Starter
  • Member
  • PipPip
  • 67 posts
Ok thanks it work. I had to change the footer to display: table cell as well. Could you explain why this worked and what the * html is for. thanks.
  • 0

#5
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
Display display: table cell makes the two div to display as table cell, which means they will both expand to the same height and shair the width between them. But IE dose not understand that (it is the only one that dose not) so we want to give it something that it understands and no other browser dose. * html is just that.

I join #web on irc.freenode.org all the time up that top there is

Don't use XHTML unless you understand it: http://hixie.ch/advocacy/xhtml

I think you sould read that.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP