CSS - Headache And A Half...

Hi.

Ive been working on a theme I have a navbar with links on it and a background image. When you hover, you get a different background image on that section of the navbar.

Im trying to style it like this:



This is what it is currently like:



This is my current css:
Code:

#nav li {
	float: left;
	border-right: 0px solid #d5d5d5;
	text-align: center;
}

#nav li.over a, #nav a:hover, #nav a:active, #nav a:focus, #nav a.over {
	color: #FFFFFF;
	border-color: #2F2F2F;
	background: url(../images/grad_d1.gif) repeat-x top #0088CC;
	text-align: center;
}

#nav li.active a {
	color: #FFFFFF;
	font-style:bold;
	background: url(../images/grad_d1.gif) repeat-x top #0088CC;
	text-align: center;
	align: center;
}

This is a link: http://toyota.identityprojects.co.uk

Everything Ive tried seems to give bad results. Initally I tried putting width 75% and height 30px, centrally and vertically aligning the red gradient, but this seemed to break the whole menu and im sure its a bad way of doing it.

Can anyone help me out with this, ive wasted ages on this!

yeah so I just need a simple help with something.
Its some basic stuff for a myspace layout..

I have got an image to span..
i received help here a while ago with it.

but I can't figure out how to hover & span together.

like for instance..
the idle image icon is black & white..
then when I mouseover it i want it to alternate to the colour
image and also span the large image of itself to the side.

I cant seem to combine them.. its either one or the other.
just hover colour image over b&W.. or jus span large image.
been noob i dont really know what to chop and mix.

so how can i do it??

thanks for any help :P

I'm having some trouble with a CSS page that works perfectly fine in IE Mac/PC, Safari, and Netscape on Mac, but goes wonky on Netscape 6 and 7.1 for PC.

Basically the top navigation, consisting of three images, gets chopped in half - only the bottom half of the images is displayed. The top half is simply blank. There's enough space for the rest of the image in the navbar. If I put a background-color: definition on the DIV that handles the tab, it stops where the image stops, cut off halfway up.

If I RESIZE the image, using either CSS or HTML, it displays fine (but, of course, at the wrong size!) This leads me to suspect that it's some kind of refresh bug in Netscape... but I haven't found anyone else with the same problem, so maybe it's just somethin' I did.

Here's the HTML that handles this part of the page:

Code:

<div id="nav2">
  	<div id="nav-secondary-title"><img src="images/title-subpage.gif" width="127" height="20" /></div>
  	<div id="nav-secondary">
     		<div class="tab"><a href="#"><img src="images/studentstab.gif" width="77" height="27" class="navimage" /></a></div>
	     	<div class="tab"><a href="#"><img src="images/fullartstab.gif" width="100" height="27" class="navimage" /></a></div>
	     	<div class="tab"><a href="#"><img src="images/studentstab.gif" class="navimage" /></a></div>
	  </div>
</div>

And here's the relevant CSS:

Code:

	#nav2 {							/* nav bar for secondary pages */
		border-top: 1px solid #BD7445;
		border-left: 1px solid #BD7445;
		border-bottom: 1px solid #2D2A28;
		border-right: 1px solid #2D2A28;
		height: 27px;
		margin:0px; padding:0px;
		z-index: 0;
		background: #A73600;
		}

	#nav-secondary-title {  /*placement of title on secondary pages */
		display: inline;
		float: left;
		height: 20px;
		margin: 0px;
		z-index: 1;
		padding:2px 10px 0px 10px;
	}

	#nav-secondary {  /* placement of main nav on secondary pages */
		float: right;
		margin: 0px 10px 0px 10px;
		height: 27px;
		padding: 0px;
		z-index: 1;
	}

	.tab {
		position: relative;
		top: 2px;
		display: inline;
		padding: 0px;
		margin: 0px;
	}
	img.navimage {
		border: 0px; margin: 0px; padding:0px 6px 0px 6px;
	}

Thanks - any help would be much appreciated!

I am not sure the best way to colour half a table cell?

Basically we have a booking system with a table that shows booked days. On the date a booking starts I want to make the right half of the table cell (actually I would prefer to use a triangle on the top right - a diagonal half) the correct colour, and the same principle applies to a departure date. I was going to just use two 50% divs for the left/right split. But the diagonal split is a bit trickier. Should I just use 2 100% height/width divs and apply a different graphic to each?

Hi All

I used Joomla to design a really simple website for someone. I currently have the problem where my text, with <h2> tag, in IE, the bottom bit of the text is cut off. For instance, a 'g' will not have its bottom 'loop'. So the text is cut off horizontally, not vertically. Works fine in Firefox.

Using IE 's web development toolbar, I narrowed it down to the H2 tag, which is on a CSS file in Joomla, there are more tags nested within the <h2> tag, but they seem ok, as they are only font tags. Here is the css code of the Joomla template.

Code:

h2, .contentheading { 	
padding: 0; 	
font-family: Verdana, Geneva; 	
font-size: 1.3em; 		
font-weight: bold; 	
vertical-align: text-top; 	
color: #333; 	
text-align: left; 	
width: 100%; } 

Any idea how to fix such a problem?

Looks fine in all other browsers (of course).

http://sports.theedgenews.com

For some strange reason the last half of the blog blows up in IE6 and IE7. It simply does not show up.

Why we don't know. When looking at the source code, it "gets" the whole page, it's just the last half is not rendered.
A copy of the css is here.
http://sports.theedgenews.com/css.css

If anyone has any ideas at all on what to do, it would be greatly appreciated.

Btw this is a design not made by me. I have become pretty familar w/ it for the blog but I have not written it.

Thanks for any help.

Hey everyone,

I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks.

If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either.

I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid.

Any ideas?

HTML4Strict Code:
Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>

  

  


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


  


 <html>


 <head>


     <style>


 body{


     width:100%;


     height:100%;


     padding:0;


     margin:0;


     color:#ffffff;


     background-color:#000000;


 }


 object{


     float:left;


     clear:both;


     width:80%;


     height:100%;


     background-color:#cccccc;


 }


 .section{


     float:left;


     clear:none;


     width:48%;


     height:48%;


     margin:1%;


     background-color:#333333;


     display:block;


     position:relative;


 }


 .panel{


     float:left;


     clear:none;


     width: 16%;


     height:96%;


     margin:2% 2%;


     background-color:#cccccc;


     


 }


 #container{


     float:left;


     clear:both;


     width:100%;


     height:100%;


     min-height:100%;


     background


 }


     </style>


 </head>


 <body>


     <div id="container">


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


     </div>


 </body>


 </html> 

I had a problem earlier with my containing DIV pushing too wide which was resolved by adding "overflow:hidden" to my containing DIV. The problem is now that it's cutting off the sides of one of my graphics.

At the bottom of my page, I have a link which you can click that will (through the magic of javascript) reveal divs on either side of my main content (the link at the bottom of the page says "reveal sea creature")

When overflow:hidden was NOT on my containing DIV, I had the problem with all the extra space, but these revealing divs worked fine. Now that I add overflow:hidden, the extra space is gone, but the divs are cut off.

I've tried pushing everything to the left which seems to make the DIV on the right work fine, but the left is still a problem. I realize this doesn't make sense without code, so here's the site.

www . deepwaterchurch . com


Thanks so much.

This is messed up....it's not the javascript cause i deleted it and it still continued...it's not the includes cause i put everything on one file....it's not the <link> cause i put it in <style> tags and it still continued


http://66.195.240.220/~majdkgf/cip/

it works PERFECT in Firefox...not in Internet Explorer

Hey DevShed,

I'm having issues with the CSS, and floats. I basically float everything to the left, and I'm having issues on the very far right with a space I cant fill basically, and on the left side I'm missing the 1px border from my wrapper div.

The "user" div is supposed to be a few pixels wider, I chopped off some pixels because when I made it longer it dropped down to below the "adheader" div.

Here's my current code;

index.php
PHP Code:
<body>
        <div id="wrapper">
            <div id="topnav"></div>
            <div id="banner">
                <img src="images/banner.jpg" />
            </div>
            <div id="header"></div>
 
            <div id="left_content">
                <div id="newsheader">Latest news</div>
                <div id="box_1">
                    <img src="images/news.jpg" />
                </div>
                <div id="box_2">
                    This is content blah blah blah
                </div>
                <div id="bottom_left">
                </div>
                <div id="bottom_right">
                </div>
            </div><!--end of left_content-->
            <div id="right_content">
                <div id="adheader"></div>
                <div id="user"></div>
                <div id="main_content"></div>
            </div><!--end of bottom_right-->
        </div><!--end of container-->
    </body> 





global.css
PHP Code:
#wrapper {
    margin: 0px auto;
    padding: 0px;
    width: 977px;
    border-left: 1px solid #B1B1B1;
    border-right: 1px solid #B1B1B1;
}
 
#topnav {
    background: #F0F0F0;
    background-image: url('images/top_back.gif');
    background-repeat: repeat-x;
    margin: 0px;
    padding: 0px;
    width: 977px;
    height: 18px;
}
 
#banner {
    background: #282828;
    background-image: #url('images/banner.jpg');
    border-bottom: 5px solid #D2D2D2;
    margin: 0px;
    padding: 0px;
    width: 977px;
    height: 72px;
}
 
#left_content {
    background: #6D6D6D;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    border-right: 1px solid #FFF;
    padding: 0px 0px 0px 0px;
    width: 476px;
    height: 100%;
    float: left;
}
 
#newsheader {
    background: #6D6D6D;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    margin: 0px 0px 0px 0px;
    padding: 0px;   
    width: 476px;
    height: 29px;
}
 
#right_content {
    background: #282828;
    padding: 0px;
    margin: 0px;
    width: 495px;
    height: 100%;
    float: left;
}
 
#box_1 {
    background: #6D6D6D;
    padding: 0px;
    margin: 0px;
    width: 476px;
    height: 249px;
}
 
#box_2 {
    background: #DADADA;
    padding: 0px;
    margin: 0px;
    width: 476px;
    height: 96px;
}
 
#bottom_left {
    background: #DADADA;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    border-right: 1px solid #FFF;
    padding: 0px;
    margin: 0px 1px 0px 0px;
    width: 236px;
    height: 29px;
    float: left;
}
 
#bottom_right {
    background: #DADADA;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    border-left: 1px solid #FFF;
    padding: 0px;
    margin: 0px;
    width: 237px;
    height: 29px;
    float: left;
}
 
#lnewscontent {
    background: #DADADA;
    border-right: 1px solid #FFF;
    padding: 0px;
    margin: 0px;
    width: 476px;
    height: 96px;
}
 
#adheader {
    background: #6D6D6D;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
    margin: 0px 0px 0px 1px;
    padding: 0px;   
    width: 209px;
    height: 29px;
    float: left;
}
 
#user {
    background: #6D6D6D;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    border-left: 1px solid #FFF;
    margin: 0px 0px 0px 1px;
    padding: 0px;   
    width: 281px;
    height: 29px;
    float: left;
} 





Here's a basic idea of what I'm going for:
img683.imageshack.us/img683/6540/layoutsamp.gif

PLEASE help me, I've been going at this for hours. I'm out of ideas!