CSS - Need Help Hand-coding Css

I've a menu bar that's a horizontally displayed list (i.e. set up with the following values:

ul{
margin-top:5px;
margin-bottom:5px;
margin-left:0px;
}
li.inline
{
display:inline;
padding-left:5px;
padding-right:5px;
border-left:1px solid #fff;
}

Contained in the following code:

<div id="mainNav">
<UL>
<li class="first"><a href="../about/index.html">About</a></li>
<li class="inline"><a href="../contact/index.html">Contact</a></li>
<li class="inline"><a href="../services/index.html">Services</a></li>
<li class="inline"><a href="index.html">Portfolio</a></li>
</UL>

On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element.

Is there a way to get both Firefox and IE to have no padding?

Thanks
</div>

Hello All,

I'm not too savvy with CSS, so please pardon if this seems uber easy.

I have started to use Google AdSense on my web pages ( I wish I could show you an example on my website, but I am not allowed to post a URL on the forum), In Firefox, it shows the main content on the left hand side and the Ads on the right hand side in a columnar format, however, there is no word wrapping going on. In Internet Explorer, the AdSense shows at the top right and then below that my content starts.

Here is what I have in my HTML in a single TD Cell:

[div class="google120rightbanner"]

[script type="text/javascript"][!--
google_ad_client = "myAdSenseID";
google_alternate_ad_url = "(Alternate Adsense URL)";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as";
google_ad_type = "text";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//--]
[/script]
[script type="text/javascript"
src="(Javascript URL Location)"]
[/script]

[/div]

[!-- Show my main content --]

[div id="ContentPane" runat="server" style="padding-left:2px;"][/div]
[!-- End my main content --]

[div class="clear"][/div]


This is what I have in my CSS:

.google120rightbanner [
width: 122px;
margin: 15px 10px 5px 10px;
float: right; /*allows main content to wrap around the google ad */
/*note: after this we need to use the clear class to clear the float at end of container */
]

.clear [
clear: both;
]


NOTE: I have changed the brackets so I can display this message on the forums.

Does anyone have any idea what I am doing wrong here in getting the display I want using this CSS? Again, I'm not very savvy about this, so a good explanation would be helpful.

Thank you all very much!

Mark Gordon

I guess I dont know what this technique is called so it was hard for me to search for an answer. The best example I can give is if you go to Dells website or any other site where you can build a computer and as you scroll down there is that box that always stays in the upper right hand corner that displays the price. Is that possible in CSS? Could somebody give me the name of the technique so I can try looking for mulitple answers or show me how its done?

Thanks,
Dave

I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at.

kopertone.com/newsite/index1.html

Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks!

I have 2 problems with the following code:
1- the vertical align only works in FF (not IE)
2- i cannot get the #index .contact to attach to the bottom right hand corner of the wrapper



* {
margin: 0;
padding: 0;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
}

body{
font: 100% verdana, helvetica, sans-serif;
background-color: #fff;
color: #000;
}

#container{
display: table;
height: 100%;
width: 100%;
margin: 0;
}

#content{
display: table-cell;
vertical-align: middle;
position: relative;
}

#index{
border: 1px dotted gray; /*for clarity in the demo*/
width: 900px;
height: 645px;
margin: 0 auto;
}
#index .logo{
position: relative;
top: 0px;
left: 0px;
}
#index .contact{
position: absolute;
bottom: 0px;
right: 0px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> I2Eye Design </title>
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>

<div id="container">
<div id="content">
<div id="index">
<div class="logo">logo</div>

<center>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="400" height="400" id="index_eyeball" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="index_eyeball.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="index_eyeball.swf" quality="high" bgcolor="#ffffff" width="400" height="400"
name="index_eyeball" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</center>

<div class="contact">contact button</div>
</div>

I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this?

A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on.

image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image.

I really appreciate your help.

The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that.

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
float:left;
width:89.091em;
list-style:none;
line-height:1;
background:#b6791e;
font:11px Verdana, sans-serif;
font-weight:bold;
padding:0;
margin:0 0 .5em 0;
}

#nav a {
display: block;
width: 11.1em;
w\idth: 10.1em;
color: #FFFFFF;
text-decoration: none;
padding: 0.75em 0.5em;
}

#nav a.daddy {

}

#nav li {
float: left;
padding: 0;
width: 11.1em;
position:relative;
}

#nav li ul {
position: absolute;
left: -999em;
height:auto;
width: 14.7em;
w\idth: 14.5em;
font-weight: bold;
margin: 0;
padding:0;
background:#FFFFFF;
color:#769841;
border: 0.1em solid #769841;
}

#nav li ul a:hover{
color:#ffff30;
background:#769841;
}

#nav li ul li a{
color:#769841;
}

#nav li li {
padding-right: 1em;
width: 14.5em;
w\idth:13.5em;
}

#nav li:hover ul {
left: auto;
}

#nav li a:hover, nav li.sfhover a:hover{
color:#FFFF30;
}

#nav li ul li a:hover {
color:#FFFF30;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
clear:both;
}

#nav li ul ul {
margin: -3.3em 0 0 5em;
}


#nav li:hover, #nav li.sfhover {
background: #769841;
}

#nav li a:hover, #nav li.sfhover a:hover{
color: #ffff30;
}

#nav li ul a{
color:#769841;
padding:.4em;
}

Hey Guys,

I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated.

Here is my CSS Code:

ul#nav {
height: 91px; width: 271px;
margin:30 auto;
background: url(images/logo.jpg) no-repeat;


}

This problem just started happening, but frustratingly I can't remember what I was changing when it started happening.

The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons.

OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem.

If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE!

GAAAAH

Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS:
Code:

html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
 body {
margin: 0; 
padding: 0; 
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;

}

img {
border:0;
}

a:link {
text-decoration: none;
color: #0096db;
}

a:hover {
text-decoration: underline;
}

a:visited {
color: #00abc7;
text-decoration: none;
}

#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}

#logo {
float:left;
width:140px;
margin:0;
padding:0;
}

#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}

#clear_both {
clear:both;
}

#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}

#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}

#content {
float:left;
width:500px;
}

#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}

#content p {
padding-left: 15px;
}

#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}

#focus_box h1 {
padding-top:15px;
}

#focus_box p, h1, ul {
padding-left:15px;
}

table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}


#menu2 {
float: left;
width: 200px;
}

#main {
float: right;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}

/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/

#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}

#sitemap li {
margin-left: 15px;
}

#sitemap ul {
margin-bottom:15px;
}

#sitemap ul li ul {
margin-left:15px;
}

And here is the HTML:
Code:

<%@ LANGUAGE="VBSCRIPT" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


	<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "(URL address blocked: See forum rules)">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">

<!-- #INCLUDE FILE="menutop.asp" -->

<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
 <td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
 <td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
 <td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
 <td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
 <td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>

</body>
</html>


</body>

</html>

A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos.

This would be a lot easier if I could show you a picture of what was going on.

Hey it's been about a year since I messed around with CSS so i'm very rusty and lost. I had an old unfinished myspace layout I wanted to use but it's missing a navigation panel. I want one on the side of the text box but I can't figure out how. Here is a picture of the current layout and the coding that goes in it.

http://s270.photobucket.com/albums/jj88/callistotyler/?action=view&current=untitled.jpg

Code:

<div style="position:absolute;margin-top:-210;margin-left:-400;">

<img src="http://i270.photobucket.com/albums/jj88/callistotyler/jaymeslayoutheadercopy.png" border="0" usemap="#planetmap" />

<map id="planetmap" name="planetmap">
</map>
</div>


<div style="
position:absolute;margin-top:200;margin-left:-150;margin-right:-10;width:400;font-family:arial;font-size:9px;color:white;
overflow:auto; line-height:9px; 
scrollbar-arrow-color:green;
scrollbar-track-color:5a4535;
scrollbar-shadow-color:5a4535;
scrollbar-face-color:5a4535;
scrollbar-highlight-color:5a4535;
scrollbar-darkshadow-color:5a4535;
scrollbar-3dlight-color:5a4535;
height:350px">




<big>ATTENTION</big><br /><br />
TEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXT  EXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTE  XTEXTEXTTEXTEXTEXTEXTEXT<br />

oh! you can erase this :D<br /><br />


TEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXT  EXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTE  XTEXTEXTTEXTEXTEXTEXTEXT<br />

oh! you can erase this :D<br /><br />



TEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXT  EXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTE  XTEXTEXTTEXTEXTEXTEXTEXT<br />

oh! you can erase this :D<br /><br />



TEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXT  EXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTE  XTEXTEXTTEXTEXTEXTEXTEXT:<br />

oh! you can erase this :D<br /><br />



TEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXT  EXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTE  XTEXTEXTTEXTEXTEXTEXTEXT<br />

oh! you can erase this :D<br /><br />



TEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXT  EXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTE  XTEXTEXTTEXTEXTEXTEXTEXT<br />

oh! you can erase this :D<br /><br />



TEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXT  EXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTE  XTEXTEXTTEXTEXTEXTEXTEXT<br />

oh! you can erase this :D<br /><br />




TEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXT  EXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTE  XTEXTEXTTEXTEXTEXTEXTEXT<br />

oh! you can erase this :D<br /><br />



TEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXT  EXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTE  XTEXTEXTTEXTEXTEXTEXTEXT<br />

oh! you can erase this :D<br /><br />


TEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXT  EXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTEXTEXTEXTTEXTEXTE  XTEXTEXTTEXTEXTEXTEXTEXT<br />

oh! you can erase this :D<br /><br />

</div>




<div style="position:absolute;margin-top:190;margin-left:-180;">
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>


</tr>
</table>
</div>

<style>
body {background-color:000000;}

.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,.btext,.redtext,.red  btext{display:none;height:0px;!important;visibility:hidden}
.embed, object {width:0px; height:0px;}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{background-color:transparent}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
div form,.mslogo, {display:none!important;}
div.profileWidth {margin-top: -30px !important;}div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}div.profileWidth div.clearfix, i i i, 
div.profileWidth div div {filter:none; opacity:0.9999}div.profileWidth div.clearfix {position:relative; top:30px}
div div select, div div form {display:none !important;}
big {font: normal 40pt monospace ; font-size:40px; letter-spacing:-1px; text-transform:lowercase; line-height:30px; border-bottom: 1px dotted yellow!important; width:340px}
textarea{font-family:fantasy; font-size:7px; text-transform:lowercase; line-height:6px; width:130px; height:60px;  border-style:0px dotted; border-width:0px; letter-spacing:0px; color:FFF8C6; background-color:transparent; overflow:hidden}
</style>
<style>
table td div div{visibility:hidden}
td div a.text{display:none;}</style>
<style>
.mslogo, .clearfix select, .clearfix form, .clearfix ul {display:none!important;}
div.profilewidth div {filter:alpha(opacity=0)!important;opacity:0;}
.profilewidth .clearfix, .profilewidth div div {filter:none!important;opacity:1;}
.profilewidth {}
.profilewidth .clearfix {position:relative;top:30px;background:none!important;}
div[id="shortcuts"] {opacity:0!important;}
tr td .clearfix div {filter:alpha(opacity=0)!important;}</style>

Hi

I would like to know if this design is possible using css.
http://www.boostnowbreaks.co.uk/test.jpg

How would you go about laying the design out using CSS?
Would it be best to have a header div (navigation)

Then 2 columns for the main content left and right, then the same again for the footer (grey panel).

Would love to know the best way of approaching this.
Thanks for any help

Hi

I am in the early stages of designing this site http://www.boostnowbreaks.co.uk/test/

This gives you a general idea of how the site should look http://www.boostnowbreaks.co.uk/test.jpg

When i view my CSS site in Opera the site completely breaks, this is true for IE5 as well.

Would someone mind having a look at my code and advise me where I am going wrong?, also have I gone about the structure in the right way?

Much appreciated for any help on this!

Ok, I've tried everything I know and I have no clue how to solve this. The best way to explain it is by showing pictures so there it goes.

NOTE: Blue box is the border of a picture while the red box is the border of A HREF

Opera
URL
http://zupa.projektas.lt/images/opera.png

IE
URL
http://zupa.projektas.lt/images/IE.png

Crome
URL
http://zupa.projektas.lt/images/crome.png

WTH does this happen? Is it coding or browser bug? Can I fix it somehow?

I also add relative code
Code:

<div class=\"meniu3c\"><a href='javascript:history.go(-1)' style='border: 2px solid;'><img src='img/left.png'></a> <a href='index.php' style='border: 2px solid;'><img src='img/home.png' style='border: 2px solid blue;'></a></div>

Code:

.meniu3c {  	background-color: #646462;  	padding-left: 0px;  	text-align: center;  	border: 2px solid;  	color: #f9f4e1;  }

EDIT: IMG tag doesnt work :S

i am new to css and want to use a background image for my navigation/link lists....

i have been working on this ALL DAY and have changed so much of the code i really have screwed everything up...

i want the RESOURCE title to move up more toward the top of the graphic....

and my lists are totally messed up -- i want them all to be UL not OL... and none of the link attributes are working at all...

please check my code and tell me what is WRONG- i am sure there are alot of mistakes...

I had things perfect in the ARTWORK part of the code and then worked on the RESCOURCES and somehow EVERYTHING got majorly messed up--
i am now totally confused and am about to tear my hair out .....or worse

i am desperate!!!!

thanks so much for any help that can be provided....i really appreciate it



graphic

here is the entire code--

#linkList {
background-color: transparent;
background-image: url(IMAGES/navbar2a.jpg);
height: 364px;
width: 185px;
background-repeat: no-repeat;
position: absolute;
margin: 100px;
top: 100px;
}


#linkList h3 { THIS IS "ARTWORK"
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
height: 10px;
margin-top: 20px;
margin-right: 20px;
margin-left: 20px;
padding-left: 30px;
padding-right: 30px;
padding-top: 1px;
width: 151px;
color: yellow;

}

#lresources { THIS IS "RESOURCES"

font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: yellow;
margin-left: 20px;
padding-bottom: 10px;
padding-left: 29px;
padding-right: 29px;
padding-top: 10px;



#linkList li {
background-color: transparent;
display: block;
color: yellow;
line-height: 3em;

margin-left: 5px;
padding-bottom: 2px;
padding-left: 50px;
padding-right: 50px;
padding-top: 1px;
}


#linkList2 {
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 10px;
color: lime;
margin-bottom: 48px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding: 0px;
}


NONE OF THESE ARE WORKING
#linkList li a:link {
background-color: transparent;
color: lime;
list-style-type: none;
}

#linkList li a:visited {
background-color: transparent;
color: white;
}


#linkList LI A:hover, #linkList A:active {
background-color: fuchsia;
color: yellow;

}