|
CSS - Divs Are Different In Firefox & Netscape
Does anyone know why firefox and netscape would interpret a div differently than IE6 and Opera? Here is my CSS:
Code: #featured_prod{
background-image:url(images/featured_prod.jpg);
background-repeat:no-repeat;
color:#000000;
font:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
width:350px;
height:200px;
position:absolute;
padding:160px 20px 20px 130px;
left:16px;
top:21px;
}
and the markup: Code: <div id="featured_prod"> <a class="mylinks" href="">Click here for more information.</a> </div> Okay, everything looks okay to me in the code but it does this in both firefox and netscape: cick for image Notice that the red highlight is the outline of the div. And this is how it looks in both IE6 and Opera7: click for image The problem is that the text "Click here for more information" does not line up correctly due to the different browser interpretations. Any wisdom? Similar TutorialsI am having a problem changing the bg colors of my tables in netscape and firefox using CSS... Ive tried everything i know, You can view the pages at RateHQ.com look at it in IE and Netscape Any ideas would be great! Thanks, Derek I'm trying to learn this CSS thing (driving me crazy!!) and I'm having problems. I validated my HTML (using HTML 4.01 Transitional) and it came back 100% perfect. I validated the CSS, and I did as many of the corrections as I could figure, and I got back this when I re-validated the .css file: Quote: To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML. Warnings URI : file://localhost/U:\iQuire2\stylesheets\indexstyles1.css Line : 15 (Level : 1) You have no background-color with your color : a:link Line : 16 (Level : 1) You have no background-color with your color : a:hover Line : 18 (Level : 1) You have no background-color with your color : a:visited Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 This is my .css file as it stands now: css Code: Original - css Code body {background:#ffffff; color:#000000; padding:0 0 0 0; margin:0 0 0 0; width:100%;} /* Page DIV Tag Stylesheet Codes */ div { position:absolute; top:1px; right:90%; bottom:auto; left:0px; } /* Hyperlink 'a href' Tags Handling */ a:link {color:#0000ff; background:transparent; font-weight:bold; text-decoration:none;} a:hover {color:#0000ff; background:transparent; font-weight:bold; text-decoration:underline;} a:active {color:#0000ff; background:#ffff00; font-weight:bold; text-decoration:none;} a:visited {color:#800000; background:transparent; font-weight:bold; text-decoration:none;} /* Text Formatting Primary Tags */ h1,h2,h3,h4,h5,h6 { font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#000080; } h1,h2,h3 {text-align:center;} h4,h5,h6 {text-align:left;} h1 {font-size:2em;} h2,h4 {font-size:1.5em;} h3,h5 {font-size:1em;} h6 {font-size:.75em;} p { font-family:TimesNR, Times, serif; font-size:.875em; text-align:left; } p.ctr { font-family:TimesNR, Times, serif; font-size:.875em; text-align:center; } p.arial { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:left; } p.arialc { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; } p.footertxt { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; font-weight:bold; } p.fineprint { font-family:Arial, Helvetica, sans-serif; font-size:.5em; text-align:center; font-weight:bold; } p.breadcrumbs { font-family:Arial, Helvetica, sans-serif; font-size:.5em; font-weight:bold; text-align:left; } /* SPAN Tag Text Formatting */ span.bold {font-weight:bold;} span.ital {font-style:italic;} span.und {text-decoration:underline;} span.boldital {font-weight:bold; font-style:italic;} span.boldund {font-weight:bold; text-decoration:underline;} span.bolditalund {font-weight:bold; font-style:italic; text-decoration:underline;} span.italund {font-style:italic; text-decoration:underline;} /* List Formatting */ ul {text-align:left;} li {font:normal bold normal .75em Arial, Helvetica, sans-serif;} /* Table Formatting */ table { border-width:0px; width:auto; } td { border-width:0px; width:auto; text-align:left; vertical-align:top; } table.topbanner { border-width:0px; width:100%; } td.headrlogo { border-width:0px; width:156px; text-align:center; vertical-align:middle; padding:2px; } td.headrtxt { border-width:0px; width:90%; text-align:center; vertical-align:middle; padding:2px; } td.headrbuttons { border-width:0px; width:auto; text-align:center; vertical-align:top; padding:0; background-image:url(blugradient_50x25.jpg); } table.buttontb { border-width:0px; width:auto; margin:0 0 0 0; } td.butntoplvl0 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; text-align:center; vertical-align:middle; } td.butntoplvl1 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; color:#ffffff; text-align:center; vertical-align:middle; background-color:#5984c8; } table.tborder { border-width:1.5px; border-style:solid; border-color:#000080; width:auto; margin-right:auto; margin-left:auto; } td.dborder { border-width:1px; border-style:solid; border-color:#000080; text-align:left; vertical-align:top; } td.dborderctr { border-width:1px; border-style:solid; border-color:#000080; text-align:center; vertical-align:middle; } table.footer { border-width:2px; border-style:solid; border-color:#000080; width:100%; } td.footertd { border-width:0px; width:auto; text-align:center; vertical-align:middle; padding:8px; }
With how it's written currently, it looks great in Microsoft Internet Explorer 6x. But when I try to bring up the same page that looks so well in IE in Netscape or Mozilla Firefox, everything becomes "squished" to the left-side of the browser window. So, for someone who's more comfortable with .css than I am (I'm working from books), can you tell me where I went wrong in this thing? I can understand if the hyperlink formatting might not be "up to code" so to speak (warning from W3C CSS Validator above), but would it affect the formatting of the entire document?? I want to avoid forcing the layout into a specific width, so I tried using percentages and "auto" for styles so that it will be a fluid layout. As I said, IE shows it just the way I want it to look. Firefox & Netscape squash everything down as if there were no formatting whatsoever. Do I need to have separate .css code for each browser?? I don't have a Mac, but my boss does and I'm sure he'll want the site to look good working through Safari too (can't test it) HELP!!! I have the following CSS: #main_navmenu{ padding-top:10px; width:120px; height:80%; float:left; margin-left:7px; font-size:11pt; text-align:center; padding-right:10px; } #main_navmenu a:link{ color:#777777; width:100px; background-color:#FDF4EE; text-decoration:none; font-weight:bold; border:1px solid #663333; margin-top:2px } #main_navmenu a:visited{ color:#777777; width:100px; background-color:#FDF4EE; text-decoration:none; font-weight:bold; border:1px solid #663333; } #main_navmenu a:hover{ color:#000000; width:100px; background-color:#DDD4CE; text-decoration:none; font-weight:bold; border:1px solid #663333; } why in IE do the link buttons look fine, with a width of 100px, and a nice gap between them. In FireFox, there is no gap between the buttons, and each button is only as wide as the text inside it. Thanks in advance for any help I'm a little new to the use of css for layouts and had a few little problems on the way. The major problem I haven't been able to solve can be seen in the following 2 pictures. From what I have read before IE misinterrupts the box idea a bit so it might be the fact that IE is just showing it up wrong giving me false hope. IE - URL Netscape - URL I want to have the div have a minimum height as I state in the stylesheet, and then the div will stretch to the height of the text if that is higher than the minimum height. The code I have comes out the way I wish it to in IE but in Netscape and Firefox, the background color stays to the div height given, but the text overflows. I have tried playing with the overflow options but this did not seem to work. I have a feeling it is just a simple solution but I may be far off with the way it is designed with the blocks and inline, etc. I looked at a few examples and tutorials on the web and this is what I have come up with. The actual website of this has lots more content but I am trying to not make it too complicated and then I will apply it to the site. Any help would be greatly appreciated. URL is URL Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<p>logo</p>
</div>
<div id="headerPic">
<p>headerpic</p>
</div>
</div>
<div id="menu">
menu
</div>
<div id="middle">
<div id="contentPic">
<p>d</p>
</div>
<div id="content">
<p>
overflowing text is here
</p>
</div>
</div>
<div id="footer">
<div id="footerLeft">
<p>left footer</p>
</div>
<div id="footerCenter">
<p>center footer</p>
</div>
<div id="footerRight">
<p>right footer</p>
</div>
</div>
</div>
</body>
</html>
********************************************* Code:
#wrapper {
background-color: #000000;
width: 750px;
text-align: left;
margin: auto;
}
body {
background-color: #CCCCCC;
margin: 0px;
text-align:center;
}
#header {
background-color: #FFFF00;
display: block;
height: 100px;
}
#menu{
background-color: #00FF00;
display: block;
width: 750px;
height: 50px;
}
#middle{
background-color: #CC0099;
display: block;
height: 320px;
}
#footer {
background-color: #6699CC;
display: block;
height: 30px;
}
#logo{
display: inline;
width: 200px;
height: 100px;
float: left;
}
#headerPic {
display: inline;
width: 550px;
height: 100px;
float: left;
}
#contentPic {
display: inline;
width: 200px;
height: 320px;
float: left;
}
#content {
display: inline;
width: 550px;
height: 320px;
float: left;
}
#footerLeft {
display: inline;
width: 100px;
float: left;
}
#footerCenter {
display: inline;
width: 450px;
float: left;
}
#footerRight {
display: inline;
width: 200px;
float: left;
}
I have just put my website live and it is running perfect in MS Explorer but in firefox and netscape the links at the bottom of the page are not working properly. Site URL is http://www.updatetechnology.ie here is the code i have for these links: <TD><span class="grey"><a href="copyright.htm">Copyright</a> | <a href="sitemap.htm">Sitemap</a> | <a href="links.htm">Links</a> </span></TD> and the corrseponding css class: .grey {font-family: Arial, Helvetica, san serif; font-size: 9pt; TEXT-DECORATION:NONE; COLOR:#ffffff; } .grey A{ COLOR:#ffffff; font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; font-style: normal; text-decoration: none; font-variant: normal; text-transform: none; } .grey A:HOVER{ COLOR:#000000; font-family: Arial, Helvetica, san serif; font-size: 9pt ;font-weight: bold; TEXT-DECORATION:none } .grey A:MOUSEOVER{ COLOR:#000000; font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; TEXT-DECORATION:NONE } In netscape when you roll over these links it is just keeping to the default site roll over colours whereas it should be set to the .grey class i defined.......... has anyone come across this before?? and if so is there a solution out there. Thanks Hello; Could anyone tell how to kill the scrollbars from IE, Firefox, Netscape.,please. My following code just work for IE, it doesn't not affect another browsers. #newst {overflow: scroll; overflow-y: scroll; overflow-x: hidden; overflow:-moz-scrollbars-vertical;} <textarea name="newst" id="newst" rows="10" cols="45" ></textarea> Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this? <STYLE type="text/css"> BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed } </STYLE> Thank you for an insight into this little glitch. The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left. Know why? hi, im trying to get a long text to wrap in a div with a given width PHP Code: <div style=" width: 100px; word-wrap: break-word; "> aaweofajw;eofija;weoifja;weoifja;woeifja;woeifja;wieofj </div> however, the closest thing i found is "word-wrap: break-word;" which only works in IE. is there anyway i can get it to work in netscape or firefox? thanks! justin Here is the site I am working on: http://testlableon.ourcampusbookstore.com/index.php There are 3 navigation bars on the template. The first one (navbar) is the black one right under the header. The second one (userbar) is right under the navbar and it is supposed to be light gray (#eeeeee). The third one is the at the bottom of the page (footerbar) and is supposed to have a black (#000000) background. If you look at the site in ie, all the background colors are displayed correctly. If you look at the site in firefox or netscape though, the userbar and footerbar are not having their background colors displayed. Any ideas? Hey CSS experts, I have a weird problem with CSS in Firefox and Netscape. I am using CSS to manage my fonts using the the div class and span class strings. However, I've noticed that Firefox and Netscape insert additional spaces between some text areas. This happens when I define things both as a div class and as a span class. What makes this increasingly weird is that I can have two nearly identical lines of code and one will display extra spaces and one will not. Case in point: These are two exaple lines of code: <tr> <td><div class="navtext">130 South Main Street</div></td> </tr> and <tr> <td><div class="navtext">Saturday - 10 a.m. to 1 p.m.</div></td> </tr> The first line doesn't end up with spaces between it, but the second line doesn't. I chose these example because only a couple lines of code seperate them. I am an extreme CSS newbie and would greatly appreciate any help with this problem. Thank you in advance! Jordan Coffey P.S. Here is a link to the site so that you can see it for yourself: www.countrysidetrvl.com I posted this by accident in the html forum , so im asking he I have this in my CSS page: Code:
a.mainlevell:link, a.mainlevel:visited {
display: block;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-bottom: 1px;
font-size: 12px;
}
a.mainlevell:hover {
color: #FFFF00;
font-size: 12px;
}
And I use this style for four links: Code: <a href="mobile.html" class="mainlevell">Home</a> <a href="m_about.html" class="mainlevell">About Us</a> <a href="m_games.html" class="mainlevell">Games</a> <a href="m_links.html" class="mainlevell">Links</a> When viewing in IE, all the URL's using m_* in the file name works with the CSS; the one referencing mobile.html doesn't. However, putting an m_ in front of the mobile.html makes the link work. Why? This happens only in IE. firefox/opera/netscape/etc ; the links all show up fine and work as supposed to. However, I have a similar set up for another menu that does almost the same CSS as the above: Code:
<table width="100%" border="0" cellspacing="2" cellpadding="3">
<tr>
<td align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="home" width="14" height="14" id="home"></td>
<td bgcolor="#990000"><a href="mobile.html" class="menulevel" onMouseOver="MM_swapImage('home','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Home</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="one" width="14" height="14" id="one"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('one','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="two" width="14" height="14" id="two"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('two','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="three" width="14" height="14" id="three"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('three','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="four" width="14" height="14" id="four"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('four','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="five" width="14" height="14" id="five"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('five','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="six" width="14" height="14" id="six"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('six','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
</table>
and this one works fine ( even with the mobile.html) I am using CSS to generate a printer-friendly webpage for Internet Explorer. The same CSS however is not working with Netscape or FireFox. I am using the following doctype in my html file. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> The contents within the <DIV> and <P> tags I am trying to hide using Print CSS works correctly in Internet Explorer 6.0. However, the contents are getting printed when Netscape 7.1 or FireFox is used. Can someone help? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Oh, to say I'm gutted is under-rated, I thought I had mastered what is CSS design for one of my sites, that was until I decided to test it at work on FireFox, Netscape and Mozilla. For a start the content isn't in the center of the page, and some of the div's seem to be constrained into the right hand column, not sure why. The page looks perfect in IE. But messed up in the others, I am kicking myself I have left it so late to check. If any very nice person/people can help me sort this out I would be sooo happy, especially if I can understand why it is so messed up. I'm not really that technical, I'm a graphic designer so if you can help, keep it fairly simple please. The link is: http://www.gladiatorszone.co.uk/main_new1.shtml I think it might be a position element wrong or a float? I'm having a layout problem in firefox. In IE the layout is just how it should look, but in firefox, the dynamic links on the left side overlap (one halfway on top of the next) and the top div is messed up as well. If I add an extra line break after each menu item, it works out in firefox, but is too spread out in IE. Anyone out there have any ideas? the site is at: http://meganmumford.com the css is at: http://meganmumford.com/megan_css.css My code is below. The problem is the images in leftFloat & rightFloat are transparent png's and the middle background image stretches into those divs are appear behind the transparent png's in Firefox only. This does not happen in IE. I've tried setting different background images, background image to none and nothing seems to work. Any ideas are appreciated. CSS #container { width: 100%; background: url('images/topM.gif') repeat; } #leftFloat { width: 30px; float: left; } #rightFloat { #width: 30px; float: right; } #middleStretch { height: 25px; min-height: 1% } --------------------------- XHTML <div id="container"> <div id="leftFloat"/>image goes here</div> <div id="rightFloat">image goes here</div> <div id="middleStretch">this div should stretch to fill the space between the left & right floats showing while repeating container background image</div> <!--end #container--></div> Firefox 3.6 is showing a blank screen for everything I have set as 100% width but looks ok in Firefox 5. My main concern at this point is this: I'm trying to figure out how to move the 4 navigation items (the owl, contact, portfolio and home) closer to the tree without going over or under it. Any help or suggestions I can get are much appreciated! ------------------------------------- Here's the HTML: 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>ATHENA STUDIOS - web design & graphic design in Charlottetown, PEI</title>
<link rel="shortcut icon" href="layout/hoot.ico" />
<link rel="stylesheet" type="text/css" href="athena.css" />
</head>
<body>
<div id="page-wrap"> <!-----page wrap div start------>
<div id="top"> <!-----top div start ------>
<img src="layout/header.png" alt="header image ATHENA STUDIOS WEB DESIGN, GRAPHIC DEIGN & FRONT END DEVELOPMENT" />
</div> <!-----top div end ------>
<div id="navbar"> <!-----nav bar BACKGROUND div start------>
</div> <!-----nav bar BACKGROUND div end------>
<div id="navigation"> <!-----navigation div start------>
<ul id="menu">
<li class="owl"><a href="index.html">Owl</a></li>
<li class="contact"><a href="/contact/">Contact</a></li>
<li class="portfolio"><a href="/portfolio/">Portfolio</a></li>
<li class="home"><a href="index.html">Home</a></li>
</ul>
</div> <!-----navigation div start------>
</div> <!-----page wrap end div------>
</body>
</html>
----------------------------------------- And here's the CSS: Code:
@charset "UTF-8";
/* CSS Document */
body {
width:100%;
font-size: 13px;
font-family: Helvetica, Verdana, Arial, sans-serif;
line-height: 1.4;
background: url(../layout/bg.png);
background-attachment:fixed;
margin:0;
padding:0;
text-align: center;
}
a, a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #31636c;
text-decoration: none;
}
a.footer:link {
color: #ddcfb2;
}
a.footer:hover {
color: #ddcfb21;
}
a.footer:visited {
color: #ddcfb2;
}
a.footer:active {
color: #ddcfb2;
}
#page-wrap {
width: 100% ;
margin: auto ;
text-align: center;
}
#top {
width:100%;
background:url(layout/skybg.png);
background-repeat:repeat-x;
text-align: center;
position:relative;
z-index: 500;
}
#navbar {
width:100%;
height:102px;
margin-top:-139px;
padding-top:15px;
background:url(layout/navbg.png);
background-repeat:repeat-x;
}
#navigation {
width:100%;
height:155px;
text-align:center;
margin-top:-154px;
}
/* Everything CSS Sprite Menu */
ul#menu {
text-align:center;
position:relative;
z-index: 501;
padding:0;
list-style:none;
clear:both;}
#menu li{overflow:hidden;
text-indent:-9999px;
display:inline;
text-align:center;
float:left;
margin-right:10px;}
#menu li a{background:url('layout/navigation.png') no-repeat; width:100%; height:100%; display:block;}
/* Owl Button */
#menu li.owl{width:158px; height:146px;}
#menu li.owl a{background-position:0px 0px;}
#menu li.owl a:hover{background-position:0px -2px;}
/* Contact Button */
#menu li.contact{width:150px; height:158px;}
#menu li.contact a{background-position:-158px 0px;}
#menu li.contact a:hover{background-position:-158px -2px;}
/* Portfolio Button */
#menu li.portfolio{width:238px; height:146px;}
#menu li.portfolio a{background-position:-308px 0px;}
#menu li.portfolio a:hover{background-position:-308px -2px;}
/* Home Button */
#menu li.home{width:114px; height:146px;}
#menu li.home a{background-position:-546px 0px;}
#menu li.home a:hover{background-position:-546px -2px;}
NEVER MIND. Got it. lol The problem is that I have a wrapper div that will contain two "boxes", one that has a white background one that has a black background. I want the white background box to be to the left of the black background box, but inside the wrapper div which has a red background. It works just fine in IE (which surprised me) but Firefox is doing something really strange. The black background box starts all the way to the left of the wrapper with the white background box on top of it. Not only that, but the text for the black background box starts below the white background box. I'm new to inserting code, but I'll give it a try: 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>
<title>linking to style sheets 2</title>
<style type="text/css">
body {
background-color: #ccccff;
}
h1 {
font: bold 20px arial, tahoma, verdana;
color: #6633ff;
border-bottom: 1px solid #444444;
margin: 25px 0;
padding: 5px;
}
p {
font: 15px verdana;
line-height: 1.5em;
color: #000077;
margin: 0;
padding: 0;
}
.leftbox {
width: 300px;
background-color: #ffffff;
padding: 10px;
margin: 10px 10px;
float: left;
}
.rightbox {
width: 300px;
padding: 10px;
margin: 10px 10px;
background-color: #000000;
}
.wrapper {
width: 800px;
background-color: #ff0000;
}
.end {
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="leftbox">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras pede sem, lobortis tempus, sodales sed, vehicula vitae,
lorem. Fusce nec massa id erat lobortis semper. Vestibulum
dignissim orci et orci. Fusce quis tortor eu sapien gravida
pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque
suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque
augue. </p>
</div>
<div class="rightbox">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras pede sem, lobortis tempus, sodales sed, vehicula vitae,
lorem. Fusce nec massa id erat lobortis semper. Vestibulum
dignissim orci et orci. Fusce quis tortor eu sapien gravida
pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque
suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque
augue. </p>
</div>
<div class="end"></div>
</div>
</body>
</html>
You'll see that I've floated the white background div, but again, this is making that div sit on top of the black background div. Can anybody help? P.S. I know this isn't really pleasing to the eye, but it's just for demonstration purposes The objective: Produce page content which behaves as if it were 'tabbed' as seen on many websites and programmes. I have done this many times before, but only with absolute positioning from the document base level. This time, the div containing the information to be tabbed has to appear relative (for re-sizability) and contain the tab divs within it. I am using a short javascript to change the z-index of the divs in order to produce the tab effect. The problem: The whole thing works fine, except for: - If I leave the css height off the divs, IE chops the bottom off, and does not allow a scroll. - If I put a height and auto (or scroll) overflow on the divs they display correctly in IE, but disappear in firefox - Until a table contained within one of the divs becomes larger than the stated height. At which point that div (not any of the others) disappears from IE as well. The question: Is this a known bug? If so, what is the work-around? Have I done something dumb? If so, what? The source: source files are available for download (they are quite large, and I don't want to trim them in case something in the trim is the problem. Plus they need to be large to demonstrate the length issue correctly). Text within these examples is copyrighted by various people and is used without permission, for illustrative purposes only. the xhtml page - click through the tabs to see the effect. Add extra rows to the table in the 'dates & prices' tab to see the disappearing problem. the javascript file - the function is at the bottom, 'layer_z_lift'. the css stylesheet - the styles for the tabs are in the middle, commented as tour details tabs. any questions, post and I shall answer. Jz. |
|||||||