|
CSS - Struggling Multicolumn Layout In Mozilla...
I have looked at this a million times and now I've completely lost track...
This is the layout in IE: as you can see, it looks perfectly fine, just like I wanted it to look...but then... this is how it looks like in Mozilla: The lay-out is all messed up..it seems like there is a fault in the code with the top left floater..because the right floater only begins at the same point the top left floater ends... I truly want this to look fine in both browsers...even though the most people use IE... (the page is at http://www.finedesigns.nl/portfolio/voorbeeld huisarts) this is the coding: body { background-color:#FFFFFF; text-align: center; } a { font-size:10px; text-decoration:none; font-weight:600; font-family:verdana; } a:link {color:#006666;} a:visited {color:#006666;} a:hover {color:#CC9900;} #container { background-color:#006666; margin-left: auto; margin-right: auto; text-align: left; width: 100%; margin: 10px auto; font-family:verdana; font-size:10px; color: #006666; line-height: 120%; } #Header { padding: 5px; height:100px; } #Left { float: left; width: 150px; margin-right:5px; margin-left:5px; background-color:#CCFFCC; } #Left2 { clear:left; float: left; width: 150px; height:210px; margin-right:5px; margin-left:5px; background-color:#CC9900; } #Right { float: right; width: 150px; height:450px; margin-right:5px; margin-left:5px; background-color:#CCFFCC; } #Content { background-color:#FFFFFF; height:450px; margin-left: 160px; margin-right: 160px; padding: 10px 10px 10px 10px; } #Footer { clear:both; background-color:#006666; padding: 0px; height:5px; } Similar TutorialsThe css is as #content { position: absolute; top: 180px; margin-left: 20%; font-family: verdana; font-size: 12pt; color: blue; } div#column1 { background: #CCCCFF; margin-left: 40px; width: 500px; height: 300px; font-family: verdana; font-size: 12pt; } div#white { background: white; } The html code <div id="content"> <div id="column1">col1<br>line1   line1<br><br><br>line3 <div id="white"> </div> col2<br>line1<br>line2<br> <div id="white"> </div> col3<br>line1<br>line2 </div> </div> The code above displays 3 columns one below other. actually a single column is there with space which seems to be 3 columns one below the other. i want a column to be displayed on the right. Have a look at the attached layout. can the code above be altered to get a effect like that . Or should i write code for 5 columns(divs). Please suggest me ! Hi all, This is my first post here so go easy on me. Firstly, please look at this: h ttp://digitalformula.net/temp/layout.jpg - I can't post a proper URL since I'm a new user ... sorry for the space at the start of the address. Anyway, the top part is what I have now and the bottom part is what I'm trying to get to. Can someone please assist with the CSS for this? I know just enough CSS to be dangerous but I can't seem to find the right way to put the captions under the images without the image on the right dropping below the image and caption on the left. I've tried all different types of float etc but nothing seems to work - I know it's something I'm doing wrong as this is probably one of the more basic questions posted here. ANY help would be much appreciated! Thanks, digitalformula I know it's an age old problem, and I know there should be many links in the forums showing me where to go...the thing is that I don't think I'm doing anything wrong. http://www.rocksolidhq.com/anmar/index.php , renders fine in IE but not Mozilla. Simply going into the CSS and changing the margin-top on the #container OR moving #services_blackout higher fixes this. I'm wondering if anyone knows wether I must fix something or whether in this case one of the browsers has a bug and needs a separate style sheet. My desired layout is working the way I want it to in IE, but not in any other browser. I've been messing with the layout and the CSS for a while now, and I'm officially at a loss. I set the height of the div that the content is in, but when the content were to overflow, I want the background image to repeat. If you enlarge the text a couple of times using Apple + or Alt +, you will see what I mean. Example HTML: <body> <div id="bodycontent"> <div id="content">Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br /></div> <div id="signup">Sign up comes here.</div> <div id="footer">Footer links come here.</div> </div> <div id="coverart"><img src="images/artwork0105.jpg" alt="Strut Magazine Cover Art" border="0" /></div> <div id="topmenu">Menu comes here.</div> </body> CSS: body { font-family: Arial, Helvetica, sans-serif; font-size: 10px; background-color: #FFFFFF; margin: 0px; } #bodycontent { width: 750px; position: absolute; top: 28px; background-image: url(images/bg0105.jpg); background-repeat: repeat; height: auto; } #content { width: 276px; margin-left: 474px; height: 704px; } #topmenu { height: 27px; width: 749px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; border-right-width: 1px; border-right-style: solid; border-right-color: #000000; background-color: #FFFFFF; vertical-align: top; position: absolute; left: 0px; top: 0px; } #signup { color: #FFFFFF; background-color: #000000; text-align: center; width: 750px; height: auto; } #footer { text-align: center; width: 750px; background-color: #FFFFFF; height: auto; } #coverart { height: 704px; width: 474px; position: absolute; top: 28px; } Thanks! Hello all, I recently redesigned my site from table layout to css layout. when viewed in ie it looks good however when viewed in anything else the layout falls apart. the link is: Benefit Solutions, Inc Do i need to copy the css to the site? I'm not too sure how to go about getting the help i need. any opinions would be appreciated. thanks in advance To make this easier on everyone, I've turned my idea into an image, so please see the image I attached. I'm absolutely horrible with CSS, so I just need some help with converting that image into CSS/HTML. I'm hoping to have each box an unordered list, so they are still organized nicely even if someone has CSS disabled. Thanks. hey guys i have an issue with a multicolumn float issue on my page here is the css Code:
vi portal.css
#contentcontainer {
position: absolute;
background-color: blue;
top: 20px;
left: 100px;
right: 100px;
width: 500px;
}
#protal .portal-column {
float: left;
width: 30%;
}
#portal #portal-column-block-list {
position: absolute;
width: 200px;
top: 180px:
left: 10px;
z-index: 10;
}
#portal .block .block-toggle {
background-image: url(block-slide.png);
float: right;
cursor: pointer;
}
#portal .block .block-toggle span {
display: none;
}
#portal .block-list-handle, #portal .handle {
cursor: move;
}
and the HTML in question Code: <div id="contentcontainer">
<div id="protal">
<div class="partal-column" id="portal-column-0">
<h2>Column 0</h2>
</div>
<div class="portal-column" id="portal-column-1">
<h2>Column 1</h2>
</div>
<div class="portal-column" id="portal-column-2">
<h2>Column 2</h2>
</div>
<div class="portal-column" id="portal-column-block-list" style="display: none;">
<h2 class="block-list-handle">Block List</h2>
<!-- Blocks go here -->
<div class="block">
<h3 class="handle">
<a class="block-toggle"<span>toggle</span></a>
<!-- title of block -->
testing links
</h3>
<div class="content">
<!-- Content -->
<?php
$content = array(1 => 'Home', 2 => 'About', 3 =>'Contact');
echo ("<ul> \n");
foreach ($content as $id => $page) {
echo ("<li><a href='?id=$id'>$page</a></li> \n");
}
echo ("<ul> \n");
?>
</div>
</div>
</div>
</div>
</div>
the problem is that it appears that only column-2 and column-1 maybe are floating to the left properly. anyone got some suggestions on whats wrong I'm looking for some help on my site, flowermule (.) com If you notice, when you open the page in an expanded browser window, it looks fine. However, if you drag your window to make it smaller, the background gets thrown off. How do I make it fixed so it doesn't move with your window? Thanks so much! Hey! Its my first time on this forum, hope your all kind =] Right, ive been trying to make a website using CSS and Div tags, all was going well, i had created my header, placed the banner as a background with no repeat ect, I wanted my menu on the left hand side, so i got that done with rollover images too, and now i want to make two collums next to the menu, one for main content which will go straight down the centre taking most of the page up, and another to the right* of it which will include a 240x400 self made advertisment. But my problem is that i cannot get the content div box to go on the right hand side of the menu insted of underneath it, and dont even ask about the advertisment div box, i cant get it anywhere near, but if you think you could help me here is my HTML: Code:
<head>
<title>Cupid Stunts Official Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('imgs for webite/videos2.gif','imgs for webite/hotspots2.gif','imgs for webite/Showtimes2.gif','imgs for webite/home2.gif','imgs for webite/contestants2.gif')">
<div id="header">
</div>
<div id="content_wrap">
<div id="menu">
<ul>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','imgs for webite/home2.gif',1)"><img src="imgs for webite/Home1.gif" alt="Home" name="Home" width="150" height="46" border="0" id="Home" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contestants','','imgs for webite/contestants2.gif',1)"><img src="imgs for webite/contestants1.gif" alt="Contestants" name="Contestants" width="150" height="46" border="0" id="Contestants" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Videos','','imgs for webite/videos2.gif',1)"><img src="imgs for webite/Videos1.gif" alt="Videos" name="Videos" width="150" height="46" border="0" id="Videos" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Hotspots','','imgs for webite/hotspots2.gif',1)"><img src="imgs for webite/hotspots1.gif" alt="Hot Spots" name="Hotspots" width="150" height="46" border="0" id="Hotspots" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Show Times','','imgs for webite/Showtimes2.gif',1)"><img src="imgs for webite/Showtimes1.gif" alt="Show Times" name="Show Times" width="150" height="46" border="0" id="Show Times" /></a></li>
</ul>
<div id="main_content">
</div>
</div>
</div>
</body>
</html>
AND THE CSS: [css] body {background-color: #000;} #header { width:100%; height:149px; background:url(imgs%20for%20webite/banner.gif) center no-repeat; } #content_wrap { clear:both; width:100%; height:100%; } #menu li { display:block; width:150px; margin:0 0 0 5%; } #main_content { height:100%; width:40%; float:right; [/css] I have tried everything i know But its not enough ='[ Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? HELP! this is the deal. My CSS/html looks great in IE.....BUT, when i open it in Mozilla, its like Mozilla isn't even registering the external css...only the html. Any ideas on how to make it work in both ie and mozilla?!? Im new to CSS and have a problem. IE displays my webpages without problem but when testing in Mozilla only a small number of CSS borders are visible. Here's an example. This works OK .right { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: none; border-top-color: #666666; border-right-color: #666666; border-bottom-color: #666666; border-left-color: #666666; } But this one does not display? .3pxspacernobackborder3 { padding: 8px; font-family: Verdana, Arial, Helvetica, sans-serif, "Book Antiqua"; font-size: 12px; color: #000066; border-top: 1px solid #666666; border-right: 1px solid #666666; border-bottom: 1px none #666666; border-left: 1px none #666666; } This is probably somethign simple but be gentle please guys. Code: <style>
a.ClassA{
background-color:#000000;
color:#ffffff;
width:200px;
height:50px;
}
a.ClassA:hover{
background-color:Red;
}
</style>
Code: <a href=# class=ClassA>Sample</a> IE http://img156.echo.cx/img156/604/ie9ay.png Mozilla http://img156.echo.cx/img156/7571/moz6ed.png The result I want is the same with IE why is it different in Mozilla ? is there away for me to make css work in mozila? I have this for IE but when i view the site in mozilla/netscape then the tables and etc are all out of place Code:
.10w {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: normal;
}
.10wB {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}
.10b {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
does anyone knows how to make it work? Hello. I can't figure out why Mozilla Firefox won't interpret my CSS correctly. In IE my site works just fine but in Firefox it doesn't work at all. The only part of the css file mozilla is picking up is the body font. Any ideas? I am trying to display a banner (image) at the top of my page with a menu under it. In IE the image aligns to the top of the menu, but in Mozilla the menu starts 15 pixels below the image. I've tried setting margin and padding to 0 for all div tags but that does not help. If I set margin=-15px for my #hnav it aligns in Mozilla, but then the menu is pushed up 15 pixels in IE. I've tried an old IE hack from eric myers, but both IE and Mozilla read the hack code and it did not help. Code:
<html>
<head>
<style type="text/css">
body {margin:0; padding:0;}
html {margin:0; padding:0; background-color:#646874;
font-size:11pt; font-family:Verdana, Arial, Helvetica, sans-serif;}
img {display: block;border:none; margin:0;padding:0;}
a:link, a:visited { color: #00F; text-decoration: none; }
#pageContent {margin-left:24px;margin-top:12px;padding-bottom:45px; padding-right:7px; }
.contentImg {width:707px;padding-left: 209px;}
.padRight { padding-right: 15px; }
#banner {
width:820px;height:149px;
background-image:url(images/820x150.gif);
background-repeat:no-repeat;
}
#hnav {width:820px;height:42px;background-image:url(images/navbar.gif);background-repeat:repeat-x;
margin-top: 0px;}
#hnav ul {list-style:none;padding-left:20px;}
#hnav ul li {float:left;font-size:11px;padding-right:15px;background-image:url(images/divider.gif);
background-position:right;background-repeat:no-repeat;height:30px;}
#hnav ul li a {padding-right:15px;position:relative;top:9px;text-decoration:none;color:#000;}
#hnav ul li a:hover {color:#777777;}
#hnav .curNavItem {padding-right:15px;position:relative;top:9px;text-decoration:none;color:#000;
font-weight:bold;}
</style>
</head>
<body>
<div id="centerPage">
<div id="mastHead">
<div id="banner"></div>
<div id="hnav">
<ul>
<li><span class="curNavItem">Home</span></li>
<li><a href="gold.html">Gold</a></li>
<li><a href="silver.html">Silver</a></li>
<li><a href="ssteel.html">Stainless Steel</a></li>
<li><a href="glass.html">Glass</a></li>
<li><a href="gemstones.html">Gemstones</a></li>
<li><a href="custom.html">Custom</a></li>
<li><a href="plating.html">Plating</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I am trying a technique at this site, http://www.anncompton.com/test. The format works in IE but not Mozilla. It seems to be the div's with a repeat-y that are failing. Below is a subset of the code - somewhere in this is the problem. <!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=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" media="screen" href="test.css" /> </head> <body> <div id="page"> <div id="pagea"> <div id="pageb"> <div id="pagec"> <div id="header"><img src="images/Banner2.gif" alt="Ann Compton" name="logo" id="logo" /></div> <div id="sidebar"> <h5>Cell: 910-699-6919<br /> Res: 910-699-4441 </h5> <a href="mailto:ann@mindspring.com">ann@mindspring.com</a> </div> </div> </div> </div> </div> </body> </html> <!--body { background:#e5f6f4 url(images/huntbkg.gif); margin:10px 0; padding:0px 5px 15px 10px; font:small/1.6em Verdana, Arial, Helvetica, sans-serif; text-align:center; color:#333; } #page { background:#B8BFD8 url(images/pg_topright.gif) no-repeat right top; margin:0 auto; padding-top:0px; width:995px; text-align:left; } #pagea { background:url(images/pg_right.gif) repeat-y right top; width:995px; } #pageb { background:url(images/pg_bot.gif) no-repeat right bottom; padding:0 0px 20px 0px; width:995px; } #pagec { background: url(images/grnbar.gif) repeat-y top left; width:990px; } --> Please see the screenshots below. Im using offsetTop + offsetHeight of the headings (Menu1, etc) to assign style.top to the sub menus. They appear when you mouseOver the headings. See how there is a pixel or two of whitespace in IE6 w/sp1? Why is that? Any help would be greatly appreciated. PS - I tried this on another PC with IE6 and sp2, and it was fine. These are the style declarations: Code: .menuHeading{
padding-left:3px;
font-size: 8pt;
font-weight: bold;
background-color: #ffffff;
color: #000000;
cursor: default;
position: relative;
margin-bottom: 0px;
border-width: 0px;
border-style: none;
}
.menuHeading_highlight{
padding-left:3px;
font-size:8pt;
font-weight:bold;
background-color:#fff392;
color:#000000;
cursor:default;
position: relative;
margin-bottom: 0px;
border-width: 0px;
border-style: none;
}
.subMenu{
font-size:8pt;
color:#cc9900;
width: 200px;
visibility:hidden;
cursor:default;
position: absolute;
padding:0px;
margin-top:0px;
margin-left:0px
}
|
|||||||