|
CSS - Img Overlap Table Okay In Gecko But Get Chopped Off In Ie
Hi!
I'm using hte CSS's float for the image. This allow the big image to float over the small table. It look good in Gecko browser but in IE, the bottom image get chopped off, right where the last row of the table end. Why is that? Is there a workaround to it? --snip-- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>E-Market Online</title> </head> <body> <style type="text/css"> a:link { BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #0000FF; TEXT-DECORATION: none } a:active { COLOR: #0000FF; TEXT-DECORATION: none } a:visited { BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #0000FF; TEXT-DECORATION: none } a:hover { BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #18208c; TEXT-DECORATION: underline } body { MARGIN: 0px; BACKGROUND-COLOR: #83878C; } form { MARGIN: 0px; } table { BORDER-COLLAPSE: collapse; } a.wto_link1:link { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; } a.wto_link1:active { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; } a.wto_link1:visited { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; } a.wto_link1:hover { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #18208c; TEXT-DECORATION: underline; } a.wto_no_link1:link { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; CURSOR: text !important; } a.wto_no_link1:active { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; CURSOR: text !important; } a.wto_no_link1:visited { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; CURSOR: text !important; } a.wto_no_link1:hover { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; CURSOR: text !important; } .faq_color1 { COLOR: #18208C; FONT-WEIGHT: bold; } .img_float3 { FLOAT: left; MARGIN: 0px 0px -250px 400px; } .wto_txt1 { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: normal; COLOR: #55575B; TEXT-DECORATION: none; } </style> <table border="0" cellpadding="0" cellspacing="0" width="761" height="100%" align="center"> <tr> <td width="1" bgcolor="#000000"><img src="images/layout_spacer1.gif" width="1" height="1"></td> <td align="center" valign="top" width="760" bgcolor="#FFFFFF"> <!-- inside table anchor --> <table border="0" cellpadding="0" cellspacing="0" width="760" align="center"> <tr> <td width="24"> </td> <td align="left" valign="top" width="712"> <img src="http://i.a.cnn.net/cnn/2004/ALLPOLITICS/09/30/debate.main/top.2110.split.pool.jpg" width="280" height="210" class="img_float3"> <table border="0" cellpadding="0" cellspacing="0" width="712"> <tr> <td align="left" valign="top" width="12"> <img src="images/arrow.jpg" width="9" height="9" vspace="6" align="top"> </td> <td width="4"> </td> <td align="left" valign="top" width="696"> <a href="#" class="wto_no_link1">F.A.Q.</a> </td> </tr> <tr> <td colspan="2"> </td> <td align="left" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="696" align="left" valign="top"> <tr> <td align="left" valign="top" class="wto_txt1" width="55"> <span class="faq_color1">Question:</span> </td> <td align="left" valign="top" class="wto_txt1" width="641"> Once my business send in all the paperworks, how soon can I start using<br> the whatever? </td> </tr> <tr> <td align="left" valign="top" class="wto_txt1"> <span class="faq_color1">Answer:</span> </td> <td align="left" valign="top" class="wto_txt1"> Once your business is issued an account number and password. </td> </tr> <tr><td colspan="2"><img src="images/spreadsheet_spacer1.gif" width="1" height="10"></td></tr> <tr> <td align="left" valign="top" class="wto_txt1"> <span class="faq_color1">Question:</span> </td> <td align="left" valign="top" class="wto_txt1"> How can I be sure the transmission of data is secure with your website? </td> </tr> <tr> <td align="left" valign="top" class="wto_txt1"> <span class="faq_color1">Answer:</span> </td> <td align="left" valign="top" class="wto_txt1"> The e-Market website encrypts all the data using 128 bit Secure Sockets<br> Layer technology. End users can decrypt the information using 128 bit<br> from the web browser. </td> </tr> </table> </td> </tr> </table> </td> <td width="24"> </td> </tr> </table> <!-- inside table anchor --> </td> </tr> </table> </body> </html> --snip-- Thanks.. FletchSOD Similar TutorialsHello, I am working with something like this: Code: <div>content one here</div> <table><tr><td>content two here</td></tr></table> How can I get the div to overlap the table and appear on top of it? Thanks! I am intergating my forum software into my main page. I have created a 100% non-table front page, but there is one table that is stuck at the bottom of the page by the forum software. So my DIV tag ends and a TABLE begins and they overlap. I placed a clear:both DIV tag after my last DIV tag, but that didn't seem to help. I don't think I can convert the TABLE to DIV since it's part of the software. I was just thinking of adding a height:20px to my "clearit" DIV to pad the bottom enough to push the table down but that seems hokey. I'm in the process of creating a new website to replace the current ageing site. I'm having problems with IE and am looking for some assistance... Code: Original - Code <div id="content-2"> <h3>Hole 1 - Gallachers</h3> <img src="includes/phpThumb/phpThumb.php?src=/V2/testlayout/V3/images/gallery/16.jpg&w=300&h=500" alt="1st Hole - Gallachers" /> <h5></h5> <p align="left"><b>History</b></p> <p><i>Named after the Blyth District Medical Officer and Public Vaccinator Dr Thomas Ardgowan Gallacher L.R.C.P. and S. Edin., L.F.P.S. Glas., whose home backed onto the field known ever since the early 1900’s as “Gallacher's Field” now a sports ground – and Out of Bounds!<strong> </strong></i></p> <p><b>Pro's Tip</b></p> <p>Tough opening hole, out of bounds right, trees left. Avoid the fairway bunkers on the right to open up your second shot to the green. <table cellspacing="0" cellpadding="1" width="100" align="right" border="1"><tbody><tr><td style="text-align: center" bgcolor="#ffffff"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,255,255)">393<br /></span></span></td><td style="text-align: center" bgcolor="#ffff00"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,255,0)">363</span></span><span style="background-color: rgb(255,255,0)"><br /></span></td><td style="text-align: center" bgcolor="#ff0000"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,0,0)">350</span></span><span style="background-color: rgb(255,0,0)"><br /></span></td></tr><tr><td style="text-align: center" bgcolor="#ffffff"><span style="color: rgb(0,0,0)">4</span></td><td style="text-align: center" bgcolor="#ffff00"><span style="color: rgb(0,0,0)">4</span></td><td style="text-align: center" bgcolor="#ff0000"><span style="color: rgb(0,0,0)">4</span></td></tr></tbody></table></p> <p> </p> <h6>06/06/08 - 23:48<br /> Jamie Wright</h6> </div> <div id="content-2"> <h3>Hole 1 - Gallachers</h3> <img src="includes/phpThumb/phpThumb.php?src=/V2/testlayout/V3/images/gallery/16.jpg&w=300&h=500" alt="1st Hole - Gallachers" /> <h5></h5> <p align="left"><b>History</b></p> <p><i>Named after the Blyth District Medical Officer and Public Vaccinator Dr Thomas Ardgowan Gallacher L.R.C.P. and S. Edin., L.F.P.S. Glas., whose home backed onto the field known ever since the early 1900’s as “Gallacher's Field” now a sports ground – and Out of Bounds!<strong> </strong></i></p> <p><b>Pro's Tip</b></p> <p>Tough opening hole, out of bounds right, trees left. Avoid the fairway bunkers on the right to open up your second shot to the green. <table cellspacing="0" cellpadding="1" width="100" align="right" border="1"><tbody><tr><td style="text-align: center" bgcolor="#ffffff"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,255,255)">393<br /></span></span></td><td style="text-align: center" bgcolor="#ffff00"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,255,0)">363</span></span><span style="background-color: rgb(255,255,0)"><br /></span></td><td style="text-align: center" bgcolor="#ff0000"><span style="color: rgb(0,0,0)"><span style="background-color: rgb(255,0,0)">350</span></span><span style="background-color: rgb(255,0,0)"><br /></span></td></tr><tr><td style="text-align: center" bgcolor="#ffffff"><span style="color: rgb(0,0,0)">4</span></td><td style="text-align: center" bgcolor="#ffff00"><span style="color: rgb(0,0,0)">4</span></td><td style="text-align: center" bgcolor="#ff0000"><span style="color: rgb(0,0,0)">4</span></td></tr></tbody></table></p> <p> </p> <h6>06/06/08 - 23:48<br /> Jamie Wright</h6> </div> The inline styles in the middle are caused by the code editor I use to create dynamic content. In IE the centre of the image is chopped out following the end of the first <p> tag. In FF it works exactly as I expect it to. Many thanks for any help that you can provide and apologies if this is a really obvious! Jamie I'm having some trouble with a CSS page that works perfectly fine in IE Mac/PC, Safari, and Netscape on Mac, but goes wonky on Netscape 6 and 7.1 for PC. Basically the top navigation, consisting of three images, gets chopped in half - only the bottom half of the images is displayed. The top half is simply blank. There's enough space for the rest of the image in the navbar. If I put a background-color: definition on the DIV that handles the tab, it stops where the image stops, cut off halfway up. If I RESIZE the image, using either CSS or HTML, it displays fine (but, of course, at the wrong size!) This leads me to suspect that it's some kind of refresh bug in Netscape... but I haven't found anyone else with the same problem, so maybe it's just somethin' I did. Here's the HTML that handles this part of the page: Code:
<div id="nav2">
<div id="nav-secondary-title"><img src="images/title-subpage.gif" width="127" height="20" /></div>
<div id="nav-secondary">
<div class="tab"><a href="#"><img src="images/studentstab.gif" width="77" height="27" class="navimage" /></a></div>
<div class="tab"><a href="#"><img src="images/fullartstab.gif" width="100" height="27" class="navimage" /></a></div>
<div class="tab"><a href="#"><img src="images/studentstab.gif" class="navimage" /></a></div>
</div>
</div>
And here's the relevant CSS: Code:
#nav2 { /* nav bar for secondary pages */
border-top: 1px solid #BD7445;
border-left: 1px solid #BD7445;
border-bottom: 1px solid #2D2A28;
border-right: 1px solid #2D2A28;
height: 27px;
margin:0px; padding:0px;
z-index: 0;
background: #A73600;
}
#nav-secondary-title { /*placement of title on secondary pages */
display: inline;
float: left;
height: 20px;
margin: 0px;
z-index: 1;
padding:2px 10px 0px 10px;
}
#nav-secondary { /* placement of main nav on secondary pages */
float: right;
margin: 0px 10px 0px 10px;
height: 27px;
padding: 0px;
z-index: 1;
}
.tab {
position: relative;
top: 2px;
display: inline;
padding: 0px;
margin: 0px;
}
img.navimage {
border: 0px; margin: 0px; padding:0px 6px 0px 6px;
}
Thanks - any help would be much appreciated! I'm about to begin designing a site, and I thought, since an external css file is only downloaded once, to make it easier to browse the site after everything has been loaded on the index(having all the images on the style be inserted through CSS), including headers navigation and such. But then I thought about compatitbility for gecko browsers, which don't display images. Instead the show the alt text. So my question is, is there any way to apply alt text for images displayed through CSS? Maybe in the div that the image is in I was wondering, I'm not entirely sure. And thought I'd ask. Is it possible to have the <div>'s #content to expand 100% in height for Gecko browsers? It worked fine in IE.... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* ================================================== */
/* == Web Layout == */
/* ================================================== */
body {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
BACKGROUND-COLOR: #55649D;
TEXT-ALIGN: center; /* for IE stupidity */
BORDER-TOP: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
}
#content {
MARGIN-TOP: 0px; /* border-top is at one, so margin-top only need to be at one pixel */
MARGIN-BOTTOM: -1px; /* border-bottom is at one, so margin-bottom only need to be at one pixel */
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
PADDING: 0px;
WIDTH: 598px;
HEIGHT: 100%;
BACKGROUND-COLOR: #8FA1B3;
BORDER-TOP: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
}
#wrapper {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
MIN-HEIGHT: 100%;
BACKGROUND-COLOR: #77649D;
BORDER-TOP: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
* html #wrapper {HEIGHT: 100%;} /* IE Hack since IE does not support "min-height" in the #wrapper*/
/* ================================================== */
/* == HTML General == */
/* ================================================== */
div
{
MARGIN: 0px;
PADDING: 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">asdf</div>
</div>
</body>
</html>
THanks, FletchSOD Hi all, I have a fairly complex page with quite a few nested divs, and some of these nested divs have overflow:auto assigned to them. The problem Im having is that on pageload and when I click a link that has uses javascript to switch the visibility of some of the sub elements, it flickers the div to a different part of the page. I know the description isnt much help, but I didnt know if this was something that others had ran into in general with gecko browsers. I've tried assigning overflow: auto to the containing divs, and to no avail. Anyone have any general ideas as to what it could be? Thanks in advance I need this menu to be halfway on the content section, however it keeps getting pushed around. I can't figure out what to change for positioning to move it over! Help HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <link rel="stylesheet" type="text/css" href="layout.css"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div id="wrapper"> <div id="main"> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!--Close #nav--> </div> <!--Close #main--> <!--Close #wrapper--> </body> </html> CSS: Code:
@charset "utf-8";
/* CSS Document */
body {
background-color:#000;
font-family: arial, helvetica, sans-serif;
margin: 1em;
}
#wrapper {
}
#main {
background-color:#FFF;
width:80%;
}
<!--margin: 0em auto;-->
#nav {
float:left;
margin-left:-7em;
margin-top:0;
}
#nav ul {
list-style-type:none;
}
#nav a {
display: block;
color: green;
background-color: navy;
width: 5em;
padding: .2em .5em;
text-decoration: none;
font-size: 1.25em;
}
#nav a:hover {
background-color: blue;
color: dark green;
}
How do I get it to overlap and to get the text/images to wrap around the nav menu? Hi I have this page http://www.networkhealthgroup.co.uk/new/jobs.htm I have put borders around the columns, when viewed in IE you will see that the main content div overlaps the right column. You will also see that the right border is looks alot more than 140px wide in IE than it does in Firefox!!! Does anyone know what I am doing wrong here? Hello! I have a flash header and I'm wondering how to make an img (jpg/png) overlap a flash header? It seems that the flash keeps covering my img when i use positionsomething) Thanks! I have decided that it would be easier to make 2 seperate div tags so I wouldn't have to deal with the issues on margin and padding that IE barf all over at. So, what I'm going to do is to make the 2nd <div> to overlap the 1st <div>. So, what the property or attribute that I can use to make it the overlapping work that work for most web browsers?? Thanks, FletchSOD Hello all - I will be so grateful if someone can help me. I'm not sure why, but my right column is overlapping my footer. I have been working too long and my brain is dead! I cannot figure it out for the life of me. Can someone please tell me what I did wrong? I am trying to have the header, 3 columns, left-fixed, right-fixed, center fluid. I want the footer to span all 3 along the bottom, which it is doing. But the right column is overlapping. Code:
#header {background: #ffffff; height: 120px; margin: 0; padding: 0}
#content {margin: 0}
#wrap {min-width:770px;margin: auto;position:relative}
#main #content-wrap {position:relative;width:100%}
#main #content {margin: 0 235px auto 175px}
#content-wrap {position:relative;width:100%}
#leftnav {position:absolute;top:0;left:0px;width:150px}
#sidebar {position:absolute;top:0;right:5px;width:200px;}
#footer {positon:relative; background-image: url(../imag
/bottom.jpg); background-repeat: repeat-x;}
With the structure as such: Code: <body id="main"> <div id="wrap"> <div id="header"> </div> <div id="content-wrap"> <div id="leftnav"> </div> <div id="content"> </div> <div id="sidebar"> </div> <div id="footer"> </div> </div> </div> </body> Hello, I have 3 Divs as follow: <div id="Container"> <div id="Header">header</div> <div id="Text">text</div> </div> I need the following: 1. Both "Header" and "Text" div's top left corner to be align at top left of "Container" div 2. "Text" div should be over "Header" div hiding it. How can I do this? Thanks, Miguel Thanks for taking the time to read my question. I have a horizontal UL for a nav bar. It works great, and positions well in IE, but in FF the ContentBox moves too far up, and overlaps with my nav bar. I can't figure out why. I added an extra div and placed the nav bar in that, but that didn't help either. What am I doing wrong. Also, I have my widths set to 100% IE has no horizontal scroll bar at the bottom, but FF does. Not sure what is going on here either. thanks again for your help. Brad HTML: Code: body {
background-color: #48494D;
padding: 0px;
margin: 0px;
}
#Head1 {
background-color: #000000;
width: 100%;
height: 100px;
padding-left: 20px;
}
#Head2 {
background-color: #ffffff;
width: 100%;
height: 45px;
border-bottom: solid #CCCC99 2px;
padding-left: 130px;
}
#MainNav {
width: 100%;
height: 20px;
background-color: transparent;
}
#navcontainer ul
{
padding-left: 25px;
margin-left: 0;
background-color: transparent;
color: #CCCC99;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
/*padding: 0.2em 1em 0em 0em;*/
background-color: transparent;
color: #CCCC99;
text-decoration: none;
text-align: center;
float: left;
border-right: 1px solid #CCCC99;
width: 134px;
font-size:12px;
border-bottom: 4px solid #48494D;
}
#navcontainer ul li a:hover
{
border-bottom: 4px solid #CCCC99;
text-align: center;
}
#navcontainer ul li.LastOne a {
border: 0 none;
}
#navcontainer ul li.LastOne a:hover{
border-bottom: 4px solid #CCCC99;
}
#ContentBox {
width: 800px;
height: 400px;
margin: 0px auto;
background-color: aqua;
display: block:
}
#CBHeader1 {
background-image:url(SecondHeaderImg.jpg);
height: 50px;
width: 800px;
}
CSS: Code: body {
background-color: #48494D;
padding: 0px;
margin: 0px;
}
#Head1 {
background-color: #000000;
width: 100%;
height: 100px;
padding-left: 20px;
}
#Head2 {
background-color: #ffffff;
width: 100%;
height: 45px;
border-bottom: solid #CCCC99 2px;
padding-left: 130px;
}
#MainNav {
width: 100%;
height: 20px;
background-color: transparent;
}
#navcontainer ul
{
padding-left: 25px;
margin-left: 0;
background-color: transparent;
color: #CCCC99;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
/*padding: 0.2em 1em 0em 0em;*/
background-color: transparent;
color: #CCCC99;
text-decoration: none;
text-align: center;
float: left;
border-right: 1px solid #CCCC99;
width: 134px;
font-size:12px;
border-bottom: 4px solid #48494D;
}
#navcontainer ul li a:hover
{
border-bottom: 4px solid #CCCC99;
text-align: center;
}
#navcontainer ul li.LastOne a {
border: 0 none;
}
#navcontainer ul li.LastOne a:hover{
border-bottom: 4px solid #CCCC99;
}
#ContentBox {
width: 800px;
height: 400px;
margin: 0px auto;
background-color: aqua;
display: block:
}
#CBHeader1 {
background-image:url(SecondHeaderImg.jpg);
height: 50px;
width: 800px;
}
Hi, I would like to superimpose (overlap) one small image over the second larger one, to a left bottom corner of that larger. The thing is I do not know the width & height of larger image as it is loaded dinamicly with php. I tryied puting large image to table than position small image to div with style="position:relative; left:0px; bottom:0px; z-index:33;" not working, can you help? Greets, I'm having trouble with the menu not being properly shown in IE. The list is supposed to pass over the central DIV, and... the bugger seems to want to stay in the background for some reason. I set that div's z-index well above the others, set the visibility to visible... I'm stumped. teh linkification I have a project that someone else coded in the first place and I am trying to make some fixes on it. I have tried a ton of things but do not know exactly what is wrong with the layout. If you visit musaferthefilm.com/test/index2.html you can see the layout and how the navigation spans past the rest of the container. I am not sure if this is very complex to fix but I have tried everything. I appreciate your help! Thank you. Hey guys, It might be easiest if you see the example first: http://www.venusadvertising.com.au/ourwork.php See how the red tab overlaps the Flash element in Webkit browsers and under it in IE? I need the page to scroll rather than for the elements to overlap. CSS doc is he http://www.venusadvertising.com.au/_assets/css_venus.css Thanks for your help! Ham I am sitting here with a css challenge and I cannot even start to imagine how to do it. In fact, I think it is impossible to do, but just thought I'd ask you guys in case I am wrong: I want to create a dropdown menu (something like coolmenus) that can be created dynamically out of a database. The first thing I want to happen is that all primary navigation items are lined up horizontally next to eachother. That one was easy: I put each item into a DIV and float them left. Now the problem: whenever a user moves the mouse over a primary navigation item, a dropdown menu will appear underneath it. However (!), this dropdown menu may be wider than the DIV above it! Here an example: ------------- ------------- | Item 1 | | Item 2 | ------------- ------------- ----------------------- | Dropdown 1 | ----------------------- ----------------------- | Dropdown 2 | ----------------------- The problem I see is that I want the dropdown menu to always be left aligned with the primary navigation item. As I don't know the absolute position of either of them (being created dynamically out of a database), the only way to get the left alignment is to write the DIVs (primary item and its dropdown) directly after each other in the code. However, if I do that I cannot get the primary navigation items to appear one next to each other. Well, I could, but they wouldn't overlap with the dropdowns as I want them to. To give you an idea of what I am trying to achieve, have a look at the dropdown he http://www.rmitenglishworldwide.com...ts/products.asp Right now, I'm using CSS to have text overlap an image. I did this simply by having the placement code for the text appear after the placement code for the image in my .shtml file. Is this the correct way of doing this? |
|||||||