CSS - Css/javascript Issues- Sliding Panel

My first new thread here! Hoping for some quick review and suggestions - any input is much appreciated. I have a site in the *early* stages of development and I'm using the "sliding doors" technique for tabbed navigation.

Not sure if I'm allowed to post links, so below are some code snippets and I've also attached a screenshot.

The nav container (#nav) temporarily has a yellow background just as a clear visual cue and it is not positioned on the page yet - so forgive the ugliness! - but the code for the actual tab effects is complete, or so I thought.

CSS:
Code:

/* horizontal main menu navigation */
#nav {
	float:left;
	width: 100%;
	background: yellow; /*temporary color just for visual cue */
}

#nav ul {
	margin: 0;
	padding: 0 0 0 300px;
	list-style: none;
}

#nav ul li {
	float: left;
	margin: 0;
	padding: 0;
	font: bold 1em/2em Verdana, Arial, Helvetica, sans-serif;
	background: url(images/tab_right.gif) no-repeat top right;
}

#nav a {
	float: left;
	display: block;
	margin: 0 10px 0 0;
	padding: 5px 2px;
	color: #fff;
	text-decoration: none;
	background: #284d73 url(images/tab_left.gif) no-repeat top left;
}

HTML:
Code:

<div id="nav">
 <ul>
  <li id="t-index"><a href="/" title="Gonzi's home page">HOME</a></li>
  <li id="t-about"><a href="#" title="About Us">ABOUT US</a></li>
  <li id="t-services"><a href="#" title="Our Services">OUR SERVICES</a></li>
  <li id="t-fleet"><a href="#" title="Our Fleet">FLEET</a></li>
  <li id="t-reserve"><a href="#" title="Reservations">RESERVATIONS</a></li>
 </ul>
<!-- end #nav -->
</div>

Problem is two fold:
1. The 'a' elements are styled to 'display: block' to make the entire tab clickable, yet it isn't actually rendering this way, and I'm at a loss to explain why. Perhaps something obvious I'm just missing...

2. The 'tab_right.gif' background image (in 'li' elements) and the 'tab_left.gif' background image (in the 'a' elements) don't appear to be meeting up correctly, leaving an area with no image. Again, no idea why and I'm hoping a 2nd pair of eyes may find something I'm missing...

If it would help to see the actual implementation, I can send a URL - just let me know how to get that to you (email?).

Thanks for any suggestions!
luispunchy

Ive got a couple navigation blocks on the left hand side of the page, now when i use:

<form>
<div>
A couple menu links go here
</div>
</form>

then in Mozilla no gap is displayed, yet in IE a gap at the top and bottom appear outside the div tags, as it is written in the code.

if i place the form tags within the div tags then the gap is at the top and bottom of the menu links, (for IE). Yet for Mozilla only a gap appears below the links when the form tags are within the div tags.

Is there any way to get rid of these gaps?

you can check the site he
http://wiganyac.hellrazer.net/

If you have a second.....

Doing a design for my brother and I have this idea that seems so simple but I can't figure it out. I attached a image that explains it better than I could in an a post. Here is the site: anthemcompanies.com/index2.html

Here is the image to explain it (can't insert an image so it is a link) anthemcompanies.com/screen.png

I would like to use just CSS to accomplish it but I have no idea how.

I have searched everywhere online. I have tried adapting some jquery scripts and some js stuff but nothing has worked for me. Advice, links, completely explained solution, or I have no idea, would be most appreciated.

In the past year or two I've been playing with CSS layout techniques, and have grown to the point where I consistently use CSS instead of tables. I'm all for it. But as much as I love them, some of the trendy practices seem to be a little impractical - particularly sliding doors, sprites and the suckerfish dropdowns.

With sprites, I can see the benefits of having fewer HTTP requests and having all rollover images in one file. With suckerfish dropdowns, it's definitely nice to have the navigation and subnavigation organized into lists. Sliding doors can certainly save a lot of bandwidth and load time, and make editing graphical navigation much easier. I'm sure all of these are terrific from SEO and accessibility standpoints, too.

But the code for these techniques seems extremely convoluted and bloated. My personal experience with suckerfish dropdowns and sprites both are that they require hacks to get them to work smoothly in browsers as recent as IE6. After all is said and done, there's actually more code required to attain the same functionality that could be achieved using HTML and JavaScript.

I'm curious to see what input everyone has. I'd love to justify styling unordered lists into sliding door dropdown nav tabs with sprite backgrounds, just because I have so much fun doing it. But is it really practical?

I am constructing a website using the sliding doors navigation (http://www.alistapart.com/articles/slidingdoors/ and http://www.alistapart.com/articles/slidingdoors2/). I have gone through both articles to successfully create the sliding doors naviagiton that I require.

My header image that I wish to place behind the navigation is 780px wide by 263px high. Therefor, I will be placing this navigation at the bottom (baseline) of this image.

I have increased my header div size to fit the image (780px x 263px). Then I have padded the navigation to try to make it position on the bottom of the image (padding-top: 236px). Unfortunatly, doing this give a 1px padding difference for IE and Firefox. IE shows it up fine, but Firefox does not. Firefox makes it look like its spaced 1px to many. If i decrease the padding to 235px, Firefox looks fine but IE displays it with 1px to less...I dont want to have to result to browser dependant css, but all hacks are welcome. Heres the code:

Code:

body {
	text-align: center;
	background-color: #7999E4
	}
#header{
	width: 780px;
	background: url('images/head.gif') repeat-x bottom;
	font-size: 93%;
	line-height: normal;
	height: 263px;
	padding: 0;
	margin:0;
	border:0;
	}
#main {
	background-color: #ffffff;
	width: 780px;
	height: 500px;
	}
#nav2 {
	background-color: #e7e7e7;
	width: 100%;
	border-bottom: 1px solid #000;
	height: 20px;
	}
#header ul {
	margin: 0;
	padding:0;
	padding-top: 236px;
	padding-left: 10px;
	list-style: none;
	}
#header li {
	display:inline;
	margin:0;
	padding:0;
	}
#header a {
	float: left;
	background: url('images/left_both.gif') no-repeat left top;
	margin: 0;
	padding: 0 0 0 9px;
	border-bottom: 1px solid #765;
	text-decoration: none;
	}
#header a span{
	float: left;
	display: block;
	background: url('images/right_both.gif') no-repeat right top;
	padding: 5px 15px 4px 6px;
	font-weight: bold;
	color: #765;
	}
	/* Commented Backslash Hack
	hides rule from IE5-Mac \*/
	#header a span{float: none;}
	/* End IE5-Mac hack*/
	#header a:hover span{
		color: #333;
		}
#header #current a{
	border-width: 0;
	background-position: 0% -150px;
	}
#header #current a span{
	background-position: 100% -150px;
	padding-bottom:5px;
	color: #333;
	}
#header a:hover {
	background-position:0% -150px;
	}
#header a:hover span {
	background-position:100% -150px;
	}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link title="Style" href="style2.css" type="text/css" rel="STYLESHEET">
</HEAD>
<BODY>
<center>
  <div id="header">
    <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li id="current"><a href="#"><span>Properties</span></a></li>
      <li><a href="#"><span>Quick Searches</span></a></li>
      <li><a href="#"><span>Holidays</span></a></li>
      <li><a href="#"><span>Contact</span></a></li>
    </ul>
  </div>
  <div id="main">
	<div id="nav2"></div>
  </div>
  <div id="footer">

  </div>
</body>
</html>

Hi There -

Just finished the tutorial from List Apart.

I've got the tabs working well, but I can't get the text colour to style in browsers (works fine in dreamweaver). I've been at this for so long that I'm sure I'm not seeing something that's obvious to fresh eyes. Could someone please look at my code and tell me where I'm being a bone-head? I've put the rules all over the place and can't seem to get the text-colour to go right.

Thanks for your help.

Here's the html:
Code:

<div id="tabnav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

Here's the CSS:
Code:

#tabnav {
	float:left;
	width:100%;
	background:#FFFFFF url("tab_background.png")
      repeat-x bottom;
	line-height:normal;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-size: 13pt;
    }

#tabnav ul {
    margin:0;
    padding:10px 10px 0;
    list-style:none;
    }
#tabnav li {
	    float:left;
	    background:url("tab_inactive_right.png")
	      no-repeat right top;
	    margin:0;
	    padding:0;
		
	    }
	
#tabnav a {
    display:block;
    background:url("tab_inactive_left.png")
      no-repeat left top;
    padding:8px 15px 4px;
	}
	
#tabnav a:link{
	color:293356;
	text-decoration: none;
    }
	
#tabnav a:hover{
	color:596eba;
	text-decoration: none;
}

/* Commented Backslash Hack
     hides rule from IE5-Mac \*/
	 
#tabnav a {float:none;}
/* End IE5-Mac hack */
	
#tabnav #current {
    background-image:url("tab_active_right.png");
    }
#tabnav #current a {
    background-image:url("tab_active_left.png");
	padding-bottom:5px;
    }

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

Hey,

I came across this forum and hopefully somebody can help me.

Here is my website: http://www.jmuelectricmotorcycle.tk

When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container.

Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page.

Thanks. Here is my css:

Code:

html {
	font: normal 12px verdana, arial;
        background-color: #000
}

body {
text-align: center
}

#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}

.hasSidebar #fw-container {
	width: 1000px;
}

a, 
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- Header --- */

#fw-head {
	position: relative;
	height: 196px;
	background: #242424;
}

#fw-title {
	font: bold 26px verdana;
	letter-spacing: -1px;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#fw-title a, 
#fw-title a:visited, 
#fw-title a:hover {
	color: #fff;
}

.fw-logo {
	width: 760px;
	height: 196px;
	position: absolute;
}

.hasSidebar .fw-logo {
	width: 1000px;
}

/* --- Navigation --- */

#fw-mainnavwrap {
	background: #242424;
	padding: 10px 20px;
	font-family: arial;
	font-weight: normal;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fw-mainnavwrap ul {
	margin: 0;
	padding: 0;
	background: transparent;
	list-style-type: none;
}

#fw-mainnavwrap li {
	margin: 0px 15px 0px 0px;
	display: inline;
}

/* --- Content --- */


#fw-bigcontain {
	width: 760px;
	float: left;
}

.fw-paragraph {
	background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
	border-bottom: 1px solid #000;
	padding: 15px 20px 10px;
	overflow: hidden;
}

.fw-title {
	margin: 0px 0px 10px;
	font: 18px verdana;
	color: #fff;
}

.fw-text {
	margin-bottom: 10px;
}

/* --- Sidebar stuff --- */

.hasSidebar #fw-sidebar {
	width: 239px;
	float: right;
	font-size: 12px;
	clear: right;
	border-left: 1px solid #000;
}

#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
	color: #fff;
	text-decoration: none;
}

#fw-sidebar .fw-title {
	font-size: 1.3em;
	font-weight: normal;
}

/* --- Footer --- */


#fw-footer {	
	font: normal 10px verdana, sans-serif;
	background: #242424;
	margin: 0px;
	padding: 11px 0px 1px;
	color: #999;
	clear: both;
	width: 760px;
}

.fw-footertext {
	background: #161616;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 0px;
	padding: 6px 0px 6px 20px;
}

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

Hi, does anyone know how to do sliding doors where the "a" element is active rather than the "li"? I'm using drupal, and it makes the "a" element active, and I'm having a hard time porting the code over...

hello all,
I am stuck on few things here. I want to make the following changes and I tried fixing them several times but could not succeed.

1. quantity input align right at the center.
2. remove button v-align at the bottom of the total1 div tag, centered.
4. subtotal text positioned on same vertical line with Qty.
3. update button position 50px left side of subtotal text.


I'd appreciate any help I could get. If you think my css is sloppy please advise, I am open to make any changes, its better late than wrong.

http://www.refinethetaste.com/html/content/basket/basket.htm


Code:

<style>
/*basket*/
#basket	{ width:576px; float:left; margin-left:2px; }
#basket .basket	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#basket h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#basket .basket .desc { float: left; width:274px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .weight	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .price	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .qty	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .total	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .desc1 { float: left; width:274px; height:80px; margin:3px; padding:3px;  }
#basket .basket .weight1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .price1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; margin:3px; padding:3px;  }
#basket .basket .qty1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .total1	{ float: left; width:60px; height:80px; text-align: center; font-weight:bold; font-size:14px; color:#716759; margin:3px; padding:3px;  }
#basket .basket .remove	{ float: left; width:574px; height:15px; border-bottom: #ece7d1 1px dotted;   }
#basket .basket .subtotal { float: left; width:504px; text-align:right; font-weight:bold; font-size:14px; border-right: #ece7d1 1px dotted; margin:10px 0 10px 0;   }
#basket .basket .subtotalint { float: left; width:60px; text-align:center; font-weight:bold; font-size:14px; border-bottom: #ece7d1 1px dotted; margin:10px 0 10px 0;}


#basket .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label {  display: block;  float: left;  width: 120px;  padding: 5px; margin: 0 0 10px 0;  text-align: left;}
#signup form div.required label, label.required {  font-weight: bold; }
input.signupsubmit	{ float: right; border:0;}

#basket img#update { float:right; width: 48px; height: 15px; padding-right:150px; border: 0px; }
#basket img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#basket img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#basket img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

#basket input.quantity { border:1px solid #716759; width:30px; text-align:right;	}

</style>
	<div id="basket">
        <h1>Create a New Account</h1>
        To take full advantage of your Williams-Sonoma account, please provide all the information below.
        <div class="hline"></div>
        <img alt="" src="http://www.refinethetaste.com/html/THEMES/default/images/checkout_step1.gif" /> 
    	<div class="basket">
            <div class="desc">Product Description</div>
            <div class="weight">Weight</div>
            <div class="price">Price</div>
            <div class="qty">Qty</div>
            <div class="total">Total</div>
            
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=13">Organic Fruit Harvest</a>
                    <br />
                    
                </div>
                <div class="weight1">2.5</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_13' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=13"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=15">Cornucopia</a>
                    <br />
                    
                </div>
                <div class="weight1">2</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_15' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=15"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=14">Organic Cider Celebration</a>
                    <br />
                    
                </div>
                <div class="weight1">1</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_14' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=14"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
          
			<div class="subtotal"><img alt="Update" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_update.gif" id="update" /> SubTotal</div>
			<div class="subtotalint">180</div>
            
        </div>



    <br />
    <a href="?Section=checkout"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_checkout.gif" id="checkout" /></a>
    <a href="http://www.refinethetaste.com/html"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_contshopping.gif" id="contshopping" /></a>
    </div>
   

EDIT: Fixed. I think the issue was because of the fixed positioned div tag at the top of the page. I had to set the width of the content_wrapper div.

EDIT 2: Well partially fixed. It now has the scroll bar, but when the window is decreased below 1000px in width, the floated header div doesn't scroll via the scroll bar. Any way to fix this?

On this page:
http://www.area51entertainment.co/emoto

When the page is resized below 1000px no scroll bar comes up.

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" /> 
<meta name="verify-v1" content="" />
<meta name="keywords" content=""  />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<?
if(isset($_GET['investors'])){
echo '<meta name="robots" content="noindex, nofollow" />';
}
else{
echo '<meta name="robots" content="index, follow" />';
}
?>
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #FFFFFF; 
font-family: Verdana; 
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" /> 
<link rel="image_src" href="./logo.png" /> 
</head>
<body>
<div class="wrapper">
<div class="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out 
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2
</div>
</div>
</body>
</html>

Code:

a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}

.wrapper{
min-height: 2000px;
}

.header_float{
width: 100%;
min-width: 1000px;
height: 35px;
top: 0px;
left: 0px;
position: fixed;
background: #49963A;
z-index: 1000;
}

.content_wrapper{
position: relative;
top: 35px;
}

.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}

.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}

.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}

img{
border: 0px;
}

I have some small CSS issues and I need some help fixing them. Most of them are related to the difference between IE and FF.

In involved www.rodoslovlje.com and e.g.the line on the left that has a little bit space, also here it doesnt go all the way down: http://www.rodoslovlje.com/novo/article.php

Any help is apreciated. Thnx.

Ok, this is my last chance at solving this problem.

I've created my site using CSS and XHTML, working fine in all the PC browsers I can find, but for some reason it is a different story on a Mac, especially IE.

It seems the left hand column of my site spreads across the full width, knocking the right frame down below it. I've looked and looked at my CSS code and I can't see what might be causing the problem.

My site is here, my CSS and XHTML is valid, although I have removed one CSS file due to problems so that is nothing to worry about.

If anyone can help, pref if you have a Mac, I would be so greatful.

I'm doing the CSS for IE7 and 8 for my site right now. And I'm having issues with borders for some of my div's.

http://www.netgamegurus.com/

The middle and right columns have a blue line in the middle. Those are borders that should be at the bottom if the "title" div's.

the left column is fine and the css is almost identical.

here's the css for the News div

Code:

//wrap for the div's
.sn_box { 
height:343px; 
width:572px; 
} 

//CSS for the title div
.sn_title { 
background-image:url(../images/bar_bg_003.jpg); 
height:25px; 
text-align:center; 
border-top:#4575D4 solid 1px; 
border-bottom:#4575D4 solid 1px; 
} 

//div for the content
.sn_title_txt { 
font-family:TROGLO; 
padding-top:2px; 
font-size:20px; 
color:#000000; 
}

here's what I got for the IE fix

Code:

.sn_title { 
background-repeat:repeat-x; 
}