Div border issue

CSS:

#tab{
background-color:#e2fdfa; /* Makes the bar black in IE */
clear:both;
height:25px;
width:100%;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #cccccc;
}

#tab ul{
list-style-type: none;
position:relative;
}

#tab ul li {
display: inline;
clear:none;
float: left;
/* background-color:#e2fdfa; /* Makes spaces between tabs appear black */
margin:0;
padding:0 2px 0 9px;
}

#tab a, #tab strong, #tab span {
display:block;
padding:5px 15px 4px 6px;
color: #5f9aeb;
}

#tab #current {
background-color: #ffffff;
}

#tab #current a {
padding-bottom:5px;
text-decoration: none;
font-weight: bold;
color: #099d8d;
}

HTML:

<div id="tab">
<ul>
<li<?php if(!isset($_GET['page_id']) && !isset($_GET['cat'])) echo " id=\"current\""; ?>><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li<?php if($_GET['cat'] == 3) echo " id=\"current\""; ?>><a href="?cat=3">Products</a></li>
<li<?php if($_GET['page_id'] == 2) echo " id=\"current\""; ?>><a href="?page_id=2">About</a></li>

<li<?php if($_GET['page_id'] == 4) echo " id=\"current\""; ?>><a href="?page_id=4">Contact Us</a></li>
</ul>
</div>

That is my CSS code, it works fine. But i wanted to know how i could make the #tab #current{} have no bottom border. I tried border-style:none; though it didn't work. Any tips?

Thanks, in advance.

 

I've got the current tab having no bottom border. (See attached file - just change the extension to .html) Perhaps it's something to do with your doctype or browser? Which are you using? Can you post the whole page?

 

you would have bottom-border:none; i believe

 

Why do you use #tab #current {} ? Shouldn't it be just just #current{}?
Also make sure you don't have more than one of the same ID on the page. I would suggest to make it a class rather then ID so it would be #tab .current{}; and on the page class=\"current\"";
I think that could also solve your border problem.

 

the problem i see here is that you have set the border to wrong element. thats probably why you cant set the border to none.

i assume you want the list items to have a border. but when its active it should have none. right?

this is the one that makes it not working

#tab{
background-color:#e2fdfa; /* Makes the bar black in IE */
clear:both;
height:25px;
width:100%;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #cccccc;
}

Code (markup):

this is for the div that has the border. the list items dont have any border set

#tab ul li {
display: inline;
clear:none;
float: left;
/* background-color:#e2fdfa; /* Makes spaces between tabs appear black */
margin:0;
padding:0 2px 0 9px;
}

Code (markup):

no border code at all!
do it right now, you know where the problem is now

because he want to style #current that exists only in #tab
but here i would also suggest using class selector instead of id for the current. even though it doesnt matter in here. its used only once in each page anyway

 

Deques, that worked fine for all the list borders and the current one not being bordered. But i would still like a border on the bottom of the rest of the tab.



Is that still possible?

 

#tab ul li A{}
#tab ul li A:active {}

Code (markup):

Set the properties of the following css elements

<ul>
<li><ahref="#" class="active">Home</a></li>
<li><ahref="#">News</a></li>
<li><ahref="#">Products</a></li>
<li><ahref="#">About</a></li>

Code (markup):

I am a little lazy so I didn't do all the work for you, but if you look at that, you should get the point.

 

you can set a border for the whole tab. but then you will have double border. my solution is that you have a background image with 1px line

#tab{
background: url(image/yourimage.gif) repeat-x bottom;
}

Code (markup):

this will set background image to the bottom of the bar

 

GAH, why do people do that with PHP? Maybe it's the old school programmer in me but wasting the overhead switching in and out of 'parse mode' doesn't just slow the program down, but makes the code impossible to read.

As to the problem at hand, you have a wrapping div for no good reason, are applying styles to the LI which is going to screw up BIG TIME in IE, and applying styles to the container that should be on the links themselves.

For the PHP -

echo '
	<ul id="tabMenu">
		<li',
			((!isset($_GET['page_id']) && !isset($_GET['cat'])) ? ' class="current"' : '' ),'>
			<a href="#">Home</a>
		</li><li>
			<a href="#">News</a>
		</li><li',
			(($_GET['cat']==3) ? ' class="current"' : ''),'>
			<a href="?cat=3">Products</a>
		</li><li',
			(($_GET['page_id']==2) ? ' class="current"' : ''),'>
			<a href="?page_id=2">About</a>
		</li><li',
			(($_GET['page_id']==4) ? ' class="current"' : ''),'>
			<a href="?page_id=4">Contact Us</a>
		</li>
	</ul>
';

Code (markup):

Of course that assumes PHP is 'open' at the start... which would output something like this:

	<ul id="tabMenu">
		<li class="current">
			<a href="#">Home</a>
		</li><li>
			<a href="#">News</a>
		</li><li>
			<a href="?cat=3">Products</a>
		</li><li>
			<a href="?page_id=2">About</a>
		</li><li>
			<a href="?page_id=4">Contact Us</a>
		</li>
	</ul>

Code (markup):

To which I'd use the following CSS if I follow you correctly.

Put the margins, padding and colors on the ANCHOR. End of problem... Well, except that you've got some wierd padding and margins there for what should be a fairly flat and simple menu.

Oh, and if you want exactly 25px height you should be EXPLICITLY stating the font size and line-height in there.

#tab {
	clear:both;
	list-style:none;
	position:relative;
	background:#E2FDFA;
	overflow:hidden; /* make wrap floats */
	font:normal 14px/16px arial,helvetica,sans-serif;
}

* html #tab { /* IE6 and earlier */
	/* haslayout almost guaranteed needed */
	height:1%; 
	/* but that screws up what we use RoW, so back to visible */
	overflow:visible; 
}

#tab li {
	display:inline; /* keep IE happy */
}

#tab a, 
#tab strong, 
#tab span {
	float:left;
	padding:4px 16px;
	text-align:center;
	color:#5F9AEB;
	border-bottom:1px solid #CCC;
}

#tab .current a {
	text-decoration: none;
	font-weight: bold;
	color:#099F8D;
	background:#FFF;
	border-bottom-color:#FFF; /* hide the border */
}

Code (markup):

I think that's what you are trying to do.

 

I don't know if this is any of my business, but i tried it out:

It didn't exactly work:



Was what it outputted. Can it be fixed?

EDIT: You never change tab in the CSS to tabMenu. It works with it changed. But it still doesn't fix his problem with the border going on the rest of the page etc.

 

My bad, yeah. Change the classnames.

Uhm, I though he was asking for it NOT to. If he wants it the whole thing EXCEPT the active one, you apply it to the UL, then set a margin-bottom:-1px on the LI. I THINK that would do the trick.

 

From what i understand, the border not being under the active tab is fine; but i think he wanted the border to go on to the edge of the page like this:


Start of page|------Active----------------|End of page

Where active shows that there isn't a border, (-) being the border. Currently it is:

Start of page| Active----- |End of page

So i think he wants it like the first one, while it's currently the second.

 

Ok, if the border is SUPPOSED to stretch the whole screen, then this is the CSS to use:

* {
	margin:0;
	padding:0;
}

#tabMenu {
	width:100%;
	float:left;
	clear:both;
	list-style:none;
	background:#E2FDFA;
	font:normal 14px/16px arial,helvetica,sans-serif;
	border-bottom:1px solid #CCC;
}

#tabMenu li {
	display:inline; /* keep IE happy */
}

#tabMenu a, 
#tabMenu strong, 
#tabMenu span {
	float:left;
	padding:4px 16px 5px;
	margin-bottom:-1px;
	position:relative; /* fix IE depth sorting */
	text-align:center;
	color:#5F9AEB;
}

#tabMenu .current a {
	text-decoration:none;
	font-weight:bold;
	color:#099F8D;
	background:#FFF;
}

#tabMenu a:active,
#tabMenu a:focus,
#tabMenu a:hover {
	color:#008;
	background:#DEF;
}

Code (markup):

That should erase the bottom border only from .current, but have it everywhere else - had to abandon using overflow:hidden to wrap our elements - you could either state the height (which has the failing of not wrapping right) or as I did make it width:100%; float:left;

I added a hover state to show that hovers will also overwrite that border - if you want it not to, you'll need to put the border back on the anchor as in my original example.

 

Thanks alot deathshadow, that's exactly what i wanted. Thanks also Sam Designs, feel free to use the code if you want.

Fixed it.