|
CSS - Lightbox & Overflow Issue In Ie7 & Ie8
Please look at this page -
Example Page On the above page you will see a link that reads "Click Here" Doing so opens a lightbox. In Chrome & FF their is a small "X" graphic appearing in the top right corner to close the lightbox, but that same graphic does not appear in IE for some reason. Can someone shed some light as to why? Tom Similar TutorialsHello, here is the code i'm using for my lightbox. it works perfectly in Firefox but in IE it doesn't center and the background is solid black instead of a transparent black with 75% opacity. any ideas how to fix it? Code:
<!-- Lightbox - Begin -->
<div id="admsg" style="background:black;-moz-opacity:0.75;filter:alpha(opacity=75%);position:absolute;margin:0px;z-index:1000;left:0;top:0;display:none"></div>
<div id="admsg2" style="width:600px;height:400px;position:absolute;z-index:1001;margin:0 auto;top:90px;left:0; right:0;margin-left:auto;margin-right:auto;border:solid 5px;background:white;text-align:center;display:none;padding:10px">
<!-- Message & Advertisement Here -->
<center><img src="/images/roller.gif"></center><br><h3>Please wait while your file is being uploaded...</h3><i>Depending on your connection this may take up to a few minutes.</i><br/><br/><br>
</div>
<!-- Lightbox - End -->
and when the submit button is pressed i call a JS function which does the following: Code:
document.getElementsByTagName("body")[0].style.overflow="hidden";
document.getElementById("admsg").style.display="block";
document.getElementById("admsg").style.width = screen.width;
document.getElementById("admsg").style.height = screen.height;
document.getElementById("admsg").style.width = document.body.scrollWidth;
document.getElementById("admsg").style.height = document.body.scrollHeight;
document.getElementById("admsg2").style.display="block";
tinyurl(dotcom)/6dw6jp4 Hi everyone I am a newbie here, Please have a look at the above link. The second box which has the therapist images and their names do not appear correctly on IE8. On all other browsers it seems to work fine. Can any one please have a look at the page and let me know a solutions. Thanks a lot. Hi, I am trying to display an image (in its own div) which extends past the height of the container div it is in. The problem is that in FF it chops off the piece of the image (as overflow is hidden??) that extends below the container div, it doesn't in any version of IE. However, if I don't set overflow to hidden, in IE6, the portion of the image that extends also makes the container divs background color display below the height I have set for it... Hope you get what I mean Anyway, here is the code Code:
<div id="banner-container">
<div id="banner">
<div id="banner-txt">
<img src="images/banner-txt.png" />
<p>
Lorem ipsum...</p>
</div><!-- banner txt -->
<div id="banner-img">
<img src="images/banner-img1.png" alt="the image" />
</div><!-- banner img -->
</div><!--banner-->
</div><!-- banner container -->
And the css Code:
#banner-container{width:100%; height:314px; margin:0 auto; padding:0; background-color:#212582; overflow:hidden;}
#banner{width:920px; height:314px; margin:0 auto; padding:0; background-image:url(../images/banner-bg.jpg); background-repeat: repeat-x; }
#banner-txt{width:519px; height:280px; float:left;}
#banner-img{width:340px; height:314px; position:relative; padding-top:10px; float:right;}
Does anyone have any ideas on how I can get it to stop chopping off the end of the image in FF?? Thanks... EDIT: Some screens... Firefox Internet Explorer I have an annoying problem that causes my css boxes to overflow in IE. You can see the problem here URL The CSS for these boxes is as follows Code:
.rbroundbox { background: url(images/postbackground.gif) repeat; }
.rbtop div { background: url(images/topleft.gif) no-repeat top left; }
.rbtop { background: url(images/topright.gif) no-repeat top right; }
.rbbot div { background: url(images/bottomleft.gif) no-repeat bottom left; }
.rbbot { background: url(images/bottomright.gif) no-repeat bottom right; }
/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 60%; margin: 1em auto; }
The HTML is Code:
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<b>[INSERT TITLE]</b>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
[INSERT NEWS]
</td>
</tr>
</table>
<p><font face="Tahoma" size="2">Posted by <a href="mailto:[INSERT EMAIL]">[INSERT REALNAME]</a> at [INSERT DATE]</font></p>
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->
What is causing the overflow in IE? it doesnt show up in any other browser I know of. The site I am working now has a discussion group. Sometimes someone will post a pic and the thread will break the 955px boundary of the wrapper. In Firefox, what happens is the thread will leave the wrapper. In IE, the thread makes the wrapper expand. In an ideal world I'd have all images resized or not even limit myself to a 955px width, but this won't work with this site... I'd like to know if it is possible to make the thread div leave the wrapper in tact at 955px like it does in Firefox. Thanks in advance :} Heys, I have the following code: <html> <head></head> <body> <div style="width: 100px; height: 100px; border: 1px solid red;"> <div style="width: 200px; border: 1px solid green; float: left;">-</div> </div> </body> </html> In FF and IE7 it works the way I'm desiring; specifically, the child div (width: 200px is contained inside a box, however it breaks outside of it due to the width. ||||||||| ||||||||| |||||||||||| |||||||||||| ||||||||| ||||||||| That's how it should look; but I can't replicate it in IE6. Any ideas? Thanks Hi, I have faced a strange issue with the CSS overflow property while using nested DIVs.The DIV with class main has the DIV main-1a as its child which in turn has the DIV with class main-1a-child as its child. As the height of main is not fixed, so it is supposed to increase with main-1a and main-1a-child. But in Mozila FireFox, the height of main is not getting increased with the child DIVs. When the overflow property is set to hidden in main, then only the height of main gets increased with its childs. The issue is fine in IE6 regardless of the overflow property. Any help/explanation in this regard will be very helpful. <html> <head> <title>My Page</title> <style type="text/css"> .main { position:relative; width:800px; display:block; border:1px solid #000000; margin:auto; padding:10px 10px 10px 10px; background:#BABB99; height:100%; overflow:hidden; } .main-1a { width:780px; float:left; background:#FFFFFF; border:1px solid #FF0000; padding:10px 10px 10px 10px; } .main-1a-child { width:760px; float:left; border:1px solid #000000; padding:10px 10px 10px 10px; background:#BABB99; } </style> </head> <body> <div class="main"> <div class="main-1a"> <div class="main-1a-child"> <p>text of div1 a2</p> <p>snkjkjsd</p> <p>snkjkjsd</p> <p>snkjkjsd</p> </div> </div> </div> </body> </html> My CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } I'm pretty sure I'm missing something fairly obvious here, but for the life of me I can't find it. Could someone please point out why Lightbox won't work for me and I get new page loads instead? http://mercurial.pri.ee/scy/pics.html I'm posting this in CSS because I think it can be solved with a CSS change, but any other ideas are welcome. See: www [dot] bluesheepstudios [dot] com [slash] ChrisCo [slash] logos.html CSS is at: www [dot] bluesheepstudios [dot] com [slash] ChrisCo [slash] stylesheet.css (sorry, can't post links) It displays properly in FF, but in IE6 and 7 the "portfolio" and "before and after" box headings are not displaying. I'm using lightbox.js to display full size images when a user clicks on a thumbnail image in the right column. The problem is caused by the thumbnail image/links and/or the lightbox.js. When I remove the links, the box headings display as they should. Any ideas what would cause this and how to fix? Thanks. I suspect that the solution to this problem really involves a more thorough analysis of my code than is fair to inflict upon this audience, but just in case there's something obvious I've overlooked... I've incorporated a lightbox into a site I'm building at www.charlescarey.co.uk/works.php When clicking on thumbnails to activate the lightbox, a 'shadow overlay' is supposed to 'grey out' the rest of the page, but it doesn't work; it only greys out a small area to the left. What am I doing wrong? Any help appreciated. Apologies if this is in the wrong section guys but it's a combo of CSS, JS and HTML. On my site I want to have a thumbnail (horizontal) scroller, which when clicked on a thumbnail uses the Lightbox style script to open an image. I'd prefer that over a block of say 20 thumbnails to call upon. However, I'm totally stumped of how to do this. Hi Im am stuck with a couple of things on my website, I am completly new to HTML and CSS and need some help please 1st problem is pages are desplaying fine in every browser I have tried barr IE 6 any ideas what would be wrong, its seems to be aligning to the left (just the text not the heading banner or menu) 2nd problem I have is I am trying to use a lightbox (lightview) which works fine on the local computer but once uploaded to my test site it stops working cant post URL so code as follows: 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" xml:lang="en" lang="en">
<head>
<title>Quay Cargo Services</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="" />
<meta name="description" content="Quay Cargo Services" />
<meta name="keywords" content="Quay Cargo Services, Shipping Belfast, Hapag Lloyd Belfast" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/andy.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
</head>
<body>
<div id="header-wrap">
<div id="header-photo"> <img alt="header photo" src="images/banner.jpg" width="890" height="195" />
</div>
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="european.html">European Trailers</a></li>
<li><a href="hapaglloyd.html">Hapag Lloyd</a></li>
<li><a href="qcnews.html">QCS in the community</a></li>
<li><a href="library.html">Library</a></li>
<li><a href="faq.htm">FAQ</a></li>
<li id="current"><a href="contacts.html">Contacts</a></li>
</ul>
</div>
</div>
<!-- header ends here -->
<!-- content starts -->
<div id="content-outer" class="clear">
<div id="content-wrapper">
<div id="content">
<div class="centerwrap"> <br />
<h1> Meet the Team</h1>
<br /><br /><br />
<style>
table {
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
<table align="center">
<tr>
<th>
<a href="contacts/andycontact.htm" rel="iframe" title=' :: :: width: 530, height: 330' class='lightview'>
<img src="images/andy.jpg" width="100" height="148" border="0"/>
<br />Andy - Hapag Lloyd Operations </th>
<th><a href="contacts/arroncontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/arron.jpg" width="100" height="148" border="0"></a><br />Arron - Hapag Lloyd Operations </th>
<th><a href="contacts/carolinecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/caroline.jpg" width="100" height="148" border="0"></a><br />Caroline - Hapag Lloyd Operations </th>
<th><a href="contacts/catherinecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/catherine.jpg" width="100" height="148" border="0"></a><br />Catherine - Hapag Lloyd Rates </th>
<th><a href="contacts/charlenecontact.htm" rel="iframe" title=' :: :: width: 580, height: 350' class='lightview'><img src="images/charlene.jpg" width="100" height="148" border="0"></a><br />Charlene - Accounts / Admin </th>
<th><a href="contacts/dianecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/diane.jpg" width="100" height="148" border="0"></a><br />Diane - Hapag Lloyd Operations </th>
<th><a href="contacts/garycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/gary.jpg" width="100" height="148" border="0"></a><br />Gary - European Sales </th>
</tr>
</table><br /><br />
<table align="center">
<tr>
<th><a href="contacts/gillycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/gilly.jpg" width="100" height="148" border="0"></a><br />Gillian - European Operations </th>
<th><a href="contacts/jacquicontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/jacqui.jpg" width="100" height="148" border="0"></a><br />Jacqui - Hapag Lloyd Sales </th>
<th><a href="contacts/lynseycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/lynsey.jpg" width="100" height="148" border="0"></a><br />Lynsey - Accounts / Admin </th>
<th><a href="contacts/patriciacontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/patricia.jpg" width="100" height="148" border="0"></a><br />Patricia - Admin </th>
<th><a href="contacts/tommycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/tommy.jpg" width="100" height="148" border="0"></a><br />Tommy - European Operations </th>
<th><a href="contacts/wendycontact.htm" rel="iframe" title=' :: ::width: 560, height: 320' class='lightview'><img src="images/wendy.jpg" width="100" height="148" border="0"></a><br />Wendy - Hapag Lloyd Customer Services </th>
</tr>
</table>
</div><br /><br /><br />
<font face="impact" size="+2"><CENTER>Quay Cargo Services<br /><br />Victoria House<br /><br />28 Westbank Road<br /><br />Belfast<br /><br />BT3 9JL</CENTER></font><br />
</div>
</div><br />
</div><br /><br />
<!-- contents end here -->
<!-- footer starts here -->
<div id="footer-bottom">
<img src="images/localpeopleblue.jpg" width="463" height="100"/>
<br />
<a href="http://www.bifa.org/content/Home.aspx"> <img src="images/bifa.gif" width="80" height="50"/></a>
<a href ="http://www.rha.uk.net"> <img src="images/rha_logo.jpg" width="80" height="50"/> </a>
</br></br>
<p class="bottom-right" >
<font color="#999999">Quay Cargo Services: Telephone: +44 (0)28 90 371195 | Fax: +44 (0)28 90 371195 | Email: <A title="Contact Quay Cargo by E-Mail" href="mailto:info@quaycargo.co.uk ">
<font color="#999999">info@quaycargo.co.uk </A></font></font>
</p>
</div>
<!-- footer ends here -->
</body>
</html>
CSS Code: * { margin: 0; padding: 0; outline: 0 }
body {
font: 11px/165% "Georgia", Geneva, Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin: 0; padding: 0 0 50px 0;
text-align: center;
background: #2f25dc url(images/bg.jpg) repeat-x;
}
/* Images */
img {
background: #2F25DE;
border: 0px solid #dcdcdc;
}
code {
margin: 5px 0;
padding: 15px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Georgia', 'courier new', monospace ;
border: 1px solid #EBEBEB;
background: #000000;
}
/* ------------------------------------------
LAYOUT
------------------------------------------- */
h1 {font-family: Georgia, sans-serif; font-size: 25px; text-align: center;}
p {font-family: Tahoma, sans-serif; font-weight: bold; color: black; font-size: 18px; }
p1 {font-family: Georgia, sans-serif; color: white; font-size: 50px; }
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
#header-wrap {
position: relative;
background: #fff url(images/wrap-bg.jpg) no-repeat;
margin: 0 auto;
width: 940px;
height: 285px;
text-align: left;
}
#header-photo {
position: absolute;
top: 90px; left: 24px;
padding: 0;
height:195px;
width: 890px;
clear: both;
}
#header-photo img {
border: none;
margin: 0; padding: 0;
}
/* Navigation */
#nav {
position: absolute;
margin: 0; padding: 0;
width: 880px;
left: 25px; top: 0px;
}
#nav ul {
float: left;
list-style: none;
width: 880px;
height: 40px;
margin: 0; padding: 0;
display: inline;
}
#nav ul li {
display: inline;
margin: 0; padding: 0;
}
#nav ul li a {
float: left;
margin: 0; padding: 18px 11px 0 11px;
font: bold 14px/35px 'Georgia', Tahoma, Helvetica, Arial, Geneva, Sans-serif;
text-decoration: none;
color: #999999;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #080091;
background: none;
border: none;
}
#nav ul li#current a {
color: #999999;
background: #d5d3d6 url(images/nav-current.jpg) repeat-x;
}
#header-wrap h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: normal 62px Georgia, 'Verdana', Times, serif;
letter-spacing: -1.5px;
color: #000000;
text-decoration: none;
top: 135px; left: 48px;
}
#header-wrap h1#logo-text a:hover {
background: none;
border: none;
}
#header-wrap p#intro {
position: absolute;
margin: 0; padding: 0;
font-family: Georgia, 'Verdana', Times, serif;
font-weight: normal;
font-size: 18px;
line-height: 1.6em;
font-style: italic;
text-transform: none;
color: #000000;
top: 205px; left: 60px;
}
#content-outer {
background: #fff;
width: 100%;
}
#content-wrapper {
width: 940px;
margin: 0 auto;
text-align: left;
}
#content {
float: left;
width: 100%;
background: #fff url(images/content-bg.jpg) no-repeat;
}
.innerwrap {
margin-top: 10px;
margin-right: 250px;
width: 865px;
padding-left: 25px;
}
.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}
.floatimgright {
float:right;
margin-top:10px;
margin-right:10px;
margin-bottom:100px;
margin-left:10px;
}
.textright {
float:right;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
.textmid {
display: block;
margin-left: auto;
margin-right: auto
}.textleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}
.floatimgcentre {
display: block;
margin-left: auto;
margin-right: auto
}
.centerwrap {
text-align: center;
margin-top: 10px;
margin-right: 250px;
width: 865px;
padding-left: 25px;
}
/* footer */
#footer-bottom {
clear: both;
border-bottom: 1px solid #111;
width: 880px;
margin: 0 auto;
}
/* clearing - required */
.clearer { clear: both; }
.clear { display:inline-block; }
.clear:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content: ".";
}
any help would be much appriciated Thanks Andy My page looks decent in Firefox but in IE the overflow property doesn't seem to be working. Perhaps you can give me some pointers as to which tags may be messing up the display in Internet Explorer. The link to the page in question. http://www.paulvincentgandolfi.com/blog/?page_id=123 Thanks what i'm trying to accomplish is two boxes next to each other inside a div, which i can scroll horizontally to see the two boxes. if you copy the code below it works correctly, only because the width of the parent div is set. Code:
<style type="text/css">
#container {
overflow:scroll;
width:100px;
}
#parent {
overflow:hidden;
width:400px;
}
.box1 {
border:1px solid black;
float: left;
height: 101px;
width: 101px;
}
</style>
<div id='container'>
<div id='parent'>
<div class='box1'></div>
<div class='box1'></div>
</div>
</div>
if i change width:900px in the parent div to width:auto then the boxes go underneath one another. That's the problem, the parent div should auto adjust to the width of both boxes. i'd really appreciate solving this. i can't have a fixed width on the parent div it should auto adjust and both boxes should be next to each other. While working on my site, I am testing it in Mozilla Firefox 1.0pr and IE 6. In my code: body, td, iframe, table, div, tr { font-variant: small-caps; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; background-color: #666666; scrollbar-3dlight-color: #666666; scrollbar-arrow-color: #666666; scrollbar-base-color: #666666; scrollbar-darkshadow-color: #666666; scrollbar-face-color: #666666; scrollbar-highlight-color: #666666; scrollbar-shadow-color: #666666; } a:link { color: #ffffff; text-decoration: none; } a:visited { text-decoration: none; color: #ffffff; } a:hover { text-decoration: none; color: #ff0000; } a:active { text-decoration: none; color: #ffffff; } select, option, textarea, input { border: #ffffff 1px solid; font-size: 11px; font-variation: normal; font-family: Verdana; background-color: #666666; } I would add "overflow: auto;" right under 'body, td, iframe, table, div, tr {' so that in Mozilla the scrollbars would not show up. However, when I load it in IE, the windows do not scroll at all. Is there a quick-fix for this, or what can I do so it will work properly in both browsers? How do I make the DIV overflow in the below codes? It works in IE but not firefox. <html > <head> <style type="text/css"> html, body { height : 100%; } </style> </head> <body> <table style="height : 100%; width : 100%"> <tr style="height : 64px; background-color : Blue;"> <td></td> </tr> <tr style="height : auto; background-color : red;"> <td> <!-- THIS IS THE PROBLEM --> <div style="height :auto; overflow-y : scroll"> <!-- THIS IS THE PROBLEM --> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> </div> </td> </tr> <tr style="height : 64px; background-color : Blue;"> <td></td> </tr> </table> </body> </html> hi, I have 3 DIV's, The first div is like a menu header DIV and the second DIV is the menu links and the third DIV has some information I want to click on the first DIV then show the second DIV like a menu problem is the third DIV moves down.. How can i let the second DIV overflow over the third DIV without it moving down? Thanks |
|||||||