...

View Full Version : Im trying to solve a gap issue in IE



reach100
05-08-2008, 12:04 AM
Hi There, I am trying to position some elements in my header using CSS.

I have moved my menu elemnt into place using position: relative; and a negative margin-top value.

The layout looks correct in FF and Safari - but in IE a gap remains where the menu would have appeared if I hadn't moved it up with margin-top: -70px;

Thanks for any help you can offer.
Rich

The page:
<!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>La Pura Vida - For Better Nutrition &amp; Weight Management</title>
<link href="includes/Styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/chrome.js">
/***********************************************
* Chrome CSS Drop Down Menu- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<div align="center">
<div id="header">
<div class="tagline">For Better Nutririon & Weight Managment</div>
<div id="logo"><a href="home.php" ><span>Home</span></a></div>
<?php include('includes/mainmenu.php'); ?></div>

<div id="content">
<div id="main_image"></div>
<p class="main_content"><br />
<span class="large">Determination + Support = Success <br />
</span></p>
<p class="main_content"><br />
La Pura Vida promotes healthy weight-loss through nutrition education and one-on-one nutrition coaching. We strive to help you acquire a diet that fits within your lifestyle so you can achieve your weight-loss goals. La Pura Vida is an evidence-based practice only supporting those approaches that have proven to be successful in long-term weight-loss maintenance<br />
<br />
</p>
<p class="main_content home_bullets"><strong>Services include: </strong></p>
<p class="main_content home_bullets">&bull; Metabolic Testing<br />
&bull; Nutrition Consultations<br />
&bull; Nutrition Coaching</p>
<p class="main_content">&nbsp;</p>
<p class="main_content large"><font color="#ca321a">Learn, Apply, Achieve</font></p>
</div>
<div id="footer"></div>
<?php include('includes/footer.php'); ?>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu","chromemenu2")
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("&#37;3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3419453-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>


The CSS code:
/* CSS Document */

* {
margin:0;
padding:0;
}

body {
background-color: #8f82ba;
background-image: url(/images/bg.gif);
background-repeat: repeat-x;
margin-top: 0px;

}
#logo a{
background-image: url(/images/logo.gif);
background-repeat: no-repeat;
height: 110px;
width: 179px;
display: block;
text-decoration: none;

}
#logo a span {
visibility: hidden;
}
.tagline{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
float:right;
margin-top: 42px;
margin-right: 50px;
}


#main_image{
display: block;
background-image: url(/images/home_image.jpg);
background-repeat: no-repeat;
height: 415px;
width: 404px;
float: right;
}

.main_content{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #454545;
margin-left: 20px;

}
#header {
background-color: #ffffff;
width: 920px;
height: 125px;
text-align: left;
/*background-image: url(/images/header_logo.gif);*/
border-bottom: 1px solid #6d64af;
}


#content {
background-color: #f7f6f4;
width: 920px;
height: 420px;
text-align: left;
}

#footer {
width: 920px;
height: 22px;
background-image: url(/images/footer.png);
}
.chromestyle{
font-weight: normal;
font: normal 11px Arial;
position: relative;
height: 30px;
margin-left: 200px;
margin-top: -70px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #fff;
width: 100%;
/*background: url(../media/chromebg.gif) center center repeat-x; THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #341f85;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromestyle ul li a:hover{
border: 1px solid #DADADA;
/*background: url(../media/chromebg-over.gif) center center repeat-x;THEME CHANGE HERE*/
}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: "";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 11px Arial;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: normal;
color: #333333;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}


.large {font-size: 24px;color: #726cb6;}
.home_bullets {
font-size: 16px;
font-style: italic;
line-height: 24px;
color: #ca321a;
}

jessnoonyes
05-08-2008, 02:48 AM
That's a lot of code to look through. Assuming this is the part you're talking about, here's what I'd try:

.chromestyle{
font-weight: normal;
font: normal 11px Arial;
position: relative;
height: 30px;
margin-left: 200px;
margin-top: -70px;
_margin-top:-10px;
}

The _ will cause that rule to only apply to IE. Just play with the margin until it moves into the position you want.

abduraooft
05-08-2008, 11:14 AM
Please read http://www.codingforums.com/showthread.php?t=82672 on how to post code here, you could edit your above post!

effpeetee
05-08-2008, 01:32 PM
Code here.:D

less this:- <script type="text/javascript" src="includes/chrome.js">


http://exitfegs.co.uk/reach100.html

Frank

reach100
05-12-2008, 09:13 PM
Frank, the link you sent is unavailable. Can you post again for me?
I tried to edit my post but cant seem to figure out how.
Thank everyone for your input...
Rich

reach100
05-12-2008, 09:16 PM
The _ will cause that rule to only apply to IE. Just play with the margin until it moves into the position you want.

This worked like a charm to solve the gap issue, except it throws off the spacing between my two menus (in IE of course) http://www.lapura-vida.com/home.php

effpeetee
05-12-2008, 09:57 PM
Back in circulation now. Latest version from your site.

http://exitfegs.co.uk/reach100.html



Frank

effpeetee
05-12-2008, 10:58 PM
Screenshot here.
Frank

reach100
05-12-2008, 11:32 PM
That looks great, doesn't seem to work in IE6 thoiugh. Any ideas?
Thanks,
Rich

effpeetee
05-13-2008, 10:06 AM
That looks great, doesn't seem to work in IE6 thoiugh. Any ideas?
Thanks,
Rich
Unfortunately I do not have IE6. If I can help in any other way, let me know.

The sources program in my signature has many useful url's

Frank

FWDrew
05-13-2008, 10:12 AM
Unfortunately I do not have IE6. If I can help in any other way, let me know.

The sources program in my signature has many useful url's

Frank

Hi Frank,

Just wanted to say that the sources link in your sig is really a nice reference and I have actually used it more than once, so I feel I owe you a thanks. :thumbsup:

You have inspired me to start putting everything useful (coding wise) I come across on a web page for my future reference, I have no idea why I didnt think of that :o

Drew

effpeetee
05-13-2008, 10:45 AM
Thanks.
But as I am not a very good coder, I thought that the best way to help was to collect the useful url's together. The main work of the program coding was greatly helped by coders on the forum, for which my grateful thanks. I am still looking at making it easier to find things. Any suggestions welcome.

Frank

reach100
05-15-2008, 10:20 PM
Finally solved it using [overflow:hidden] on my header div.
Thanks everyone!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum