WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > CSS Tab Problems

Reply
  Thread Tools Display Modes
Old 14th November 06, 09:44 PM   #1
Scatropolis
Guest
 
Posts: n/a
Default CSS Tab Problems

Hi, I posted a few days ago, but with no response, so I'm rewriting this being a bit more specific with my problem(s).

I'm using an ul as my tabs in a div. Each li has a black background and a white border on all sides but the bottom. The whole div has a bottom white border for the top of the content area.

Here's my CSS code:

HTML Code:
#header {
	border-bottom:2px solid white;
	float:left; 
	text-align:left;
	width:654px; }

#header ul {
	list-style-type:none;
	margin-top:0; margin-right:0; margin-bottom:0;
	margin-left:1em;
	padding:0; }
	
#header  li {
	background-color:black;
	border-right:2px solid white;
	border-top:2px solid white;
	border-left:2px solid white;
	border-bottom:none;
	display:inline;
	margin:.1em .1em 0 .1em; 
	padding-left:1em; padding-right:1em; }
I've got a couple of problems. One is in Firefox...I've got a single pixel gap between my ul and my bottom border. The second problem is in IE7. The top border doesn't show up and also when I resize the page text everything gets thrown into chaos. I tried removing code to figure out what was the problem, but I didn't get anywhere with that.

Any ideas? Thanks a lot,
Stephan

Oh and the page is located at http://www.scatropolis.com/daveainleyphotography
  Reply With Quote
Old 16th November 06, 06:17 PM   #2
Scatropolis
Guest
 
Posts: n/a
Default Re: CSS Tab Problems

Anyone have any ideas?
  Reply With Quote
Old 16th November 06, 09:19 PM   #3
quiller
WLC Lover
 
Join Date: Jul 2006
Location: Nebraska
Posts: 59
Default Re: CSS Tab Problems

The spacing issue can be fixed by switching the <li> to block, then floating it left. Inline elements shouldn't be used as block elements, especially when if you're expecting them to maintain a specific height/width and accept attributes that are normally reserved for block elements (i.e. border).

I'd also suggest adding conditional comments to include an IE-specific (well, less than IE7, as it does a decent job with most CSS) stylesheet. From there, you can move the additional rules (text-align on <body> and #container, for instance) out of the main stylesheet. In addition, you could get rid of the #minheighthack <div> and use a little knowledge of IE6 to accomplish the same thing without needless additional markup.

Specifically: IE6 doesn't recognize min-height, but it does treat height essentially the same. That is, IE6 will continue to expand vertically past the height set, much the same as min-height, while other browers will stop once the height value has been reached. Therefore, in the IE-specific stylesheet:

Code:
body {
 text-align: center;
}
#container {
 text-align: left;
}

#content {
 height: 586px;
}
quiller is offline   Reply With Quote
Old 17th November 06, 05:54 AM   #4
Scatropolis
Guest
 
Posts: n/a
Default Re: CSS Tab Problems

Ahhhhh perfect now....at least with the tabs, thanks. Now I have to decide if the tab effects are cheesy or not.

Now for the IE specific stuff. I understand about using the additional stylesheet. My problem is that I don't know what all is IE fixes/specific and what isn't. I guess I haven't been dealing with CSS and multiple browsers for long.

So for the conditional comments would I just do this?

HTML Code:
<!--[if lte IE 6]>
body {
 text-align: center;
}
#container {
 text-align: left;
}

#content {
 height: 586px;
}
<![endif]-->
and then in the main stylesheet remove the minheight hack and a min-height:xxx to the content? Sounds easy enough.

Thanks for all your help,
Stephan
  Reply With Quote
Old 17th November 06, 06:14 AM   #5
Scatropolis
Guest
 
Posts: n/a
Default Re: CSS Tab Problems

ah, except it has to be internal CSS.....

Oh and I removed both text-aligns in discussion and it didn't affect anything in firefox IE6 and IE7....am I missing something. I cleared the cash, so it is loading the page freshly (yeah that's a real word).

Thanks.
  Reply With Quote
Old 17th November 06, 06:54 AM   #6
quiller
WLC Lover
 
Join Date: Jul 2006
Location: Nebraska
Posts: 59
Default Re: CSS Tab Problems

Quote:
Originally Posted by Scatropolis
ah, except it has to be internal CSS.....
Actually, no. CC's are HTML, so it should be more like:

Code:
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
(Editor's note: I'd recommend using <style> and @import instead of a <link/> tag. Older, CSS1-only browsers [such as Netscape 4.x] won't even be able to load the stylesheet...)

Quote:
Originally Posted by Scatropolis
Oh and I removed both text-aligns in discussion and it didn't affect anything in firefox IE6 and IE7....am I missing something. I cleared the cash, so it is loading the page freshly (yeah that's a real word).
The text-align work-around is designed for IE5/5.5 or IE6 in quirks mode. If the page has a doctype, IE6 will move into standards mode, which correctly renders margin: 0 auto.
quiller is offline   Reply With Quote
Old 17th November 06, 05:11 PM   #7
Scatropolis
Guest
 
Posts: n/a
Default Re: CSS Tab Problems

Alright, so my header needs to include...

HTML Code:
	<!--[if lte IE 6]>
	<STYLE TYPE="text/css">
	    @import url("ie.css");
	</STYLE>
	<![endif]-->
because doesn't seem to be working in IE 6.

Thanks,

Oh and I wish I could have my pages up but I'm having hosting problems......again.
  Reply With Quote
Old 18th November 06, 07:54 AM   #8
quiller
WLC Lover
 
Join Date: Jul 2006
Location: Nebraska
Posts: 59
Default Re: CSS Tab Problems

Let us know when you have a working example; anything less is guesswork.
quiller is offline   Reply With Quote
Old 18th November 06, 07:58 AM   #9
Scatropolis
Guest
 
Posts: n/a
Default Re: CSS Tab Problems

Rodger that.....vizaweb has not been my friend this past week. Very unlike them.
  Reply With Quote
Old 18th November 06, 05:07 PM   #10
Scatropolis
Guest
 
Posts: n/a
Default Re: CSS Tab Problems

Yay, it's up.....

At the moment my only concern is the height issue in IE6. It doesn't seem to want to have a minimum height, even with the separate stylesheet. Am I implementing it wrong?

Thanks for all your help,
Stephan
  Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Server Problems ? chrishirst Suggestions & Feedback 2 9th December 06 04:47 PM
CSS Layout Problems BenDesign CSS 0 11th October 06 07:57 PM
IE Div Positioning Problems Liberty Dog Browser Compatibility 1 10th October 06 05:36 PM
Beginner's problems Niik CSS 9 17th September 06 10:56 AM
Link problems netfuel CSS 0 12th June 06 04:53 PM


All times are GMT. The time now is 04:43 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.