|
CSS - Tables Display Wrong In Ff
ftp://cs-helpdesk.student.framingham.edu/FSCWeb/63108AS06/cwestermann/scenicroute/music.htm
thats my page. it displays right in IE, however FF is giving me problems. Anyone know how I can fix it. Similar TutorialsCan anyone tell me why my popup menus are displaying with a 40 or 50 px wide gap between them and the top level menu on this page? The link Hover over "For Professionals" in the left hand navigation to see the problem. I am new to javascript. This is a menu created by DMAPI menu builder. I am not new to CSS. I suspect that this is a CSS problem. In Firebug I can see padding and margins but cannot find where they are being defined. I have tried to add margin: 0; and padding: 0; but they are getting overridden. Any help would be appreciated. I want to display two tables on one line keeping the width of the table. In the past whenever I've wanted two things on the same line I've always floated one left and the other right. I've tried doing this here but the tables have a width of 45% and when they get floated its as if thats ignored. Heres a picture to better explain the situation. http://i52.tinypic.com/2ry1vur.jpg Thanks in advance for all your help. Hey guys! Usually if you make a table and then make another table, the other table will be located below the table before. I want them to be side by side. So I tried this CSS value : table { display : inline; } then it worked, but the problem is, that if the tables have different sizes, the smaller one is not aligned to the top and looks smaller than the table before it. I want them all to be aligned to the top. I tried vertical-align:top and valign="top", but they still don't work... Is there any other way to make tables have no line breaks before and after the table? Is there any other property that controls the line breaks of the table? I tried display:table-cell , but the problem is still the same. thanks I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks Hi be gentle with me im new I am trying to put a backgroung image in my div the code i have used is below, in my styles file i have .backgroundbox { background-attachment: fixed; background-image: url(backpat1.png); background-repeat: no-repeat; background-position:top; height:600px; width:900px; position:relative; background-position: top left; top: 0px; left:0px;} and in the body i have <div class="biggestcolumn" "backpat1" align="center"> if someone could please tell me what ive done wrong. I'm attempting to build my first purely-css site, and it's both exciting and quite frustrating. My latest frustration, after having found a 3-column format I like, is the footer. It looks fine in IE, but in Firefox its placement is entirely wonky - up under the header and behind the main content. Check it out at: http://www.theatrebayarea.org/v2/ and the css is he http://www.theatrebayarea.org/v2/css/default.css It does this whether I put the #footer <div> inside or outside the #frame <div>. Any ideas on why it's doing this, and how I could have it reliably appear at the bottom of the three columns? Thanks, Daniel This css looks great in IE, but in netscape, etc. its fubared. the positioning of the #leftcolumn is wayy out in the middle of the page instead of aligned like it should be and the right column is below the left column. Code:
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family: 'Arial', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background: #ccc url(/greydusk/images/bgtile.gif) repeat-y 50% 0;
}
#caption {
font-style: italic;
font-weight: bold;
padding-top: 5px;
}
#frame {
width:750px;
margin-right:auto;
margin-left:auto;
padding:0px;
text-align:left;
}
#header {
float: left;
width: 751px;
height: 55px;
background: #ccc url(/greydusk/images/header_back.gif);
}
#leftcolumn {
float: left;
width: 505px;
background:#fff;
margin-top: 0px;
margin-left: 2px;
padding-bottom:20px;
}
#title {
display: block;
font-weight: bold;
font-size: 15px;
}
#date {
float: left;
margin-left: -35px;
font-weight: normal;
color: #9C9C9C;
}
#leftcolumn p {
background: url(/greydusk/images/marker1.gif) no-repeat top left;
text-indent: 50px;
padding-left: 15px;
padding-right: 10px;
margin-top: 35px;
}
#rightcolumn {
float: left;
width: 235px;
margin-left: 5px;
}
#rightcolumn p {
padding-left: 15px;
padding-right: 15px;
}
#menu {
background-color: #000;
width: 751px;
font-size: 14px;
color: #FFF;
}
#menu ul {
list-style: none;
margin: 0 0 0 0;
padding: 0px;
}
#menu li {
float: left;
margin: 0 0 0 0;
padding-right: 15px;
padding-top: 4px;
padding-left: 15px;
padding-bottom: 7px;
}
#menu li a {
padding: 0px;
padding-bottom: 3px;
margin: 0 px;
color: #fff;
text-decoration: none;
}
#menu li a:hover {
border-bottom: 4px solid #7F88DA;
color: #7F88DA;
}
and here is the page. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>test site</title>
<script type="text/javascript"></script>
<style type="text/css" media="all">
@import "/greydusk/css/greydusk.css";
</style>
</head>
<body onload="window.defaultStatus='test-site';" id="test">
<div id="frame">
<div id="header">
<p> </p>
</div>
<div id="menu">
<ul>
<li><a href="blah.htm">home</a></li>
<li><a href="blah.htm">news</a></li>
<li><a href="blah.htm">forums</a></li>
</ul>
</div>
<div id="leftcolumn">
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
</div>
<div id="rightcolumn">
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
</div>
</div>
</body>
</html>
thanks in advance! this thing is frustrating me to no end! and i just no it's a simple 1 or 2 lines i need to change. =( O.K. Here is my style sheet code ... Code: <style type="text/css">
channel-container
{
background-color:#66FF66;
width:500px;
margin:auto;
clear:both;
}
.channel
{
background-color:#CCFF00;
width:465px;
margin:auto;
}
.channel#
{
background-color:#99CC99;
width:35px;
margin:auto;
}
</style>
and here is some of the html .... Code: <div class=channel-container> <div style=channel>A&E</div> <div style=channel#>118</div> </div> <div class=channel-container> <div style=channel>ABC Family</div> <div style=channel#>180</div> </div> <div class=channel-container> <div style=channel>America Live</div> <div style=channel#>219</div> </div> <div class=channel-container> <div style=channel>Angel One</div> <div style=channel#>262</div> </div> <div class=channel-container> <div style=channel>Angel Two</div> <div style=channel#>266</div> </div> <div class=channel-container> <div style=channel>Cartoon Network (East)</div> <div style=channel#>176</div> </div> <div class=channel-container> <div style=channel>Cartoon Network (West)</div> <div style=channel#>177</div> </div> Now believe me I know this is not aesthetically appealing ... However I am just trying to get a base layout where I have a container I can change the background color on, or alter as I wish in the future. Then I want the channel name to show up, with the channel number in a separate cell .. All easily changable at will through the CSS rule modifications. Can anyone tell me what it is I am doing wrong here ? I am getting no formatting at all with the code I am using. I am trying to acheve a 2 coulumn layout, but I keep getting problems wilt the side-box. I am designing this layout for a system where users can insert content, so I am not sure how much content will be added to the two boxes. I am trying to show what I want to acheve in a picture-file: http://www.student.uib.no/~st11920/...out_problem.gif No matter how I do it I cannot get the surrounding DIV to expand horisontally according to the fixed content DIV's height. It will gladly expand to the liquid sized one, but the other one wich I have positioned absolute will not affect the surrounding DIV. My guess is that this is the expected result. The HTML is he http://www.student.uib.no/~st11920/...divproblem.html But my question is how can I do what I want with CSS? This may not belong here. But it's about a CSS file, so I'll explain: I have css files in that are not having any effect. Using Firebug, I think I've narrowed the problem down to a server-side issue. Here are my headers: Request: Host: host User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: https:/host/page Cookie: ........... Response: Date: Tue, 27 Jul 2010 18:34:59 GMT Server: Apache/2.2.3 (Red Hat) X-Powered-By: PHP/5.1.6 Content-Length: 2613 Connection: close Content-Type: text/html; charset=UTF-8 It looks like the server is delivering the css file as text/html and the browser is not interpreting the css styles. Other css files work. For example (main.css): Request: Host: host User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: https://host/page Cookie: ..... Response: Date: Tue, 27 Jul 2010 18:34:59 GMT Server: Apache/2.2.3 (Red Hat) Last-Modified: Tue, 27 Jul 2010 16:21:07 GMT Etag: "136d7c-cba-e36a82c0" Accept-Ranges: bytes Content-Length: 3258 Connection: close Content-Type: text/css My server is Apache 2.2.3. I've tried adding "AddType text/css .css" to the httpd.conf file. But that had no effect. Any suggestions? Hello all, I am completely new to web development and am trying to learn by building my own website. The issue I have run into is getting my css to work on my page. HTML: <html> <head> <LINK rel="stylesheet" type="text/css" href="style.css"> <title> The Shore Report </title> </head> <body> <img src="TheShoreReport.jpg" > <img src="Web Background.jpg" > </body> </html> CSS: body { background-color:#b0c4de; } Is there something wrong with my link or what? hey all, i am working on new site but it is displaying wrong in IE (surprise surprise). i have been playing around to see if i can get it sorted but am not having any luck, if anyone can offer an idea that would be appreciated. here is the CSS Code:
<style type="text/css">
html, body {padding: 0;
color: #000; background: #eee;
font-family: Arial, Veranda, sans-serif;
margin: 0 140px 0 140px;}
h1 {color: #FFF; background: url('smallpardimg.jpg') center no-repeat #eef;
font: bold 200%/1em Arial, Verdana, sans-serif;
padding: 3em 1em 0; margin: 0 0 0 0;
border-left: 1px solid gray; border-right: 1px solid gray;}
#main {font-size: small; color: #AAA; background: #FFF;
margin: 0; padding: 2.5% 12.5%; clear: left;
border-top: 1px solid gray;}
#nav {margin: 0; padding: 0 0 0 0; float: left; background-color:#eef; border-left: 1px solid gray;
border-right: 1px solid gray;}
#nav li {list-style:none; float: right;
font-size: 12px; line-height: 20px; white-space: nowrap;}
#nav a {display: block; float: left; padding: 0 10px 0 10px;
text-decoration: none; font-weight: normal;
border: 1px solid; border-color: #EEF #EEF #EEF #EEF; color: #333; width: .1em;}
html>body #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {background-color: #eef; color: #ccc;
border-color: #eee #CCC #eee #ccc;}
</style>
and here is how it is being used in the html Code: <h1></h1> <ul id="nav"> <li><a href="/render/">?</a></li> <li id="current"><a href="/newmed/">contact us</a></li> <li><a href="/photos/">about globalhotel</a></li> <li><a href="/design/">my account</a></li> <li><a href="/webdev/">hotels</a></li> </ul> <div id="main"> <p> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> and finally here is a link to the page where i am having probs. thanks in advanced RF Hi I am using an external stylesheet to try to format some text, but its not working. This is what is in my stylesheet? PHP Code: .small{ font-size: 11px; font-family: verdana, arial, tahoma;} I then used this: PHP Code: <span class="small"><font color="#000000">my text</font></span> But its not formatting it. Any ideas? My site looks as expected in IE, but Netscape...Fotget it. I can't figure it out, i've been at it for a long time. goto www.eldore.com Attached is my css file. Thanks Have some problem with my css. Would appreciate some comments on how to do this: Here is the code: with explanation of what's not working: It's a small "complete" htm file..... Code:
<html>
<head>
<style>
.outer {
display: block;
background-color: #bbb;
border: 0;
padding: 0;
text-align: center;
font-family: Arial,sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
font-weight: normal;
}
.outer a {
display: block;
color: #000;
text-decoration: none;
font-weight: normal;
}
.outer a:hover {
text-decoration: underline; color: #fff;
}
.outer a:hover .text-top {
text-decoration: none; color: #000;
}
</style>
</head>
<body style="background-color:#888;">
<br><br> Why is the top text underlined with a white line when hover and text itself is black?<br>
I want it to work like this:<br>
When I hover over any area inside the outer div then I want<br>
Bottom text: white and underlined<br>
Top text: no change<br><br>
NN 7.2: Same problem as above<br>
FF 1.04: same problem as above<br>
Opera 8: same problem as above<br>
In opera 8 there is also some small underline below image: How do I get rid of that?<br><br>
IE 6: Works as it should<br><br><br>
<center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
<tr>
<td>
<div class="outer">
<a href="#">
<div class="text-top">
<br>Top text<br><br>
</div>
<div class="text-img">
<img src="snake.jpg" height="100px" width="100px" alt="" border="0">
</div>
<div class="text-bot">
<br>Bottom text<br><br>
</div>
</a>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>
I'm having issues with the HTML/CSS, only in IE, on the following page: http://www.datamonkeys.co.uk/webmail/webmail/log_in.php It looks ok in FF....It has something to do with the absolute/relative positioning, i think.... can anyone help me out here? thanks.. Hi I am trying to setup a left border on my tabs here, no matter what combination I try I cannot get a left border exactly like the others without giving the wholebox a full border (dont want this!!) Look at the example below.. Code: /* TESTING TABBED BROWSERS*/
}
.tabbed-box {
width: 100%;
background: #fff url(tabbed-body-bg.jpg) repeat-x bottom;
/*border: 1px solid #ddd;
border-bottom:none;
border-left:none;
border-right:none;}
*/}
.tabbed-box .tabs li {
list-style: none;
float: left; }
.tabbed-box .tabs li a {
display: block;
width: 100px;
padding: 5px 0;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #888;
background: #fff url(tabbed-tab-bg.jpg) repeat-x bottom;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;}
.tabbed-box .tabs li:first-child a {
border-left: 1px solid #ddd; }
.tabbed-box .tabs li a:hover {
color: #333; }
.tabbed-box .tabs li a:focus {
outline: none; }
.tabbed-box .tabs li a.active {
background: #fff;
color: #333;
border-bottom: 1px solid #fff;
border-left: 1px solid #ddd;
margin-left: 5px; }
.tabbed-content {
padding: 3em 1em 1em 1em;
display: none; }
Screen Shot Here (not aloud to post URLS) --- >freeimagehosting.net/uploads/4e9d9acdf7.jpg Any help much appreciated!! |
|||||||