CSS - Ie 7 Div Margin Issue & Layout Assistance

Please visit this page -

http://www.brooksidetransmission.com

Put your mouse over the "Services" link to reveal a sub menu.

In FF it works fine in that you can access each of the links in the sub menu.

In IE7 though when you move the mouse around the sub menu links the who sub menu disappears.

Some background on this issue is that I am trying to incorporate two 3rd party resources into one, with one being the drop down menu, the other being a box with rounded corners.

Somewhere in my combining the two messed up the :hover for IE7

Any help would be appreciated.

Tom

Greetings,

The following webpage works in firefox but not in ie:
http://resonantprogramming.com/homen.html

For some reason the menu does not show up correctly. I want the menu to show up within the top gradient graphic, but ie doesn't like that for some reason. I did alter the z-index value to no avail. Any ideas?

Thanks

Hi all,
I've been reading this forum for a while now, but never had to post anything before. I've hit a snag whilst working on my new personal site.
Its all fine in Firefox, I'm using a Wordpress engine to spit out 'posts' which are actually folio items, however IE, after the first one, the second one and every one after that have some extreme margin/padding issue so that the content area is only maybe 20px wide.
www dot lucas-starbuck dot com forwardslash design is the site address, any ideas would be much appreciated!
Thanks, Lucas

Remove.

Please look at the main navigation on this site

www.downtowntransmission.com

I have it exactly how I want it in IE7 but it is a bit off in FF. Mouseover the Contact link and Gallery Link and you will see what I mean. Is there some small adjustment I can make to make it look the same in both?

As a side note, do you like the site? T

Take a look at http://actrucking.com/. I just added the orange link towards the middle of the page that says "Get a FREE Online Quote Now!!" I'd like to push it down a bit so it is more centered in the blue area, but I can't seem to get the text to acknowledge margin or padding? Here are what the styles look like:

Code:

#tlCallBox { background:#336799; height:75px; display:block; float:left; width:868px; margin-left:10px; position:relative; margin-bottom:30px}
#tlCallBox h2{ color:white; font-size:19px; margin: 15px 0 0 30px}
#tlCallBox p { color:White; margin-left:32px}
#tlCallBox b { margin:20px 0 0 120px; font-weight:bold; font-size:20pt}

I've got an "IE" issue! This CSS code looks perfect in IE7 and Firefox. It is a photo box that offsets 225 pixels to the left of the text box.

Code:

#inside_offset_image {
	width: 319px;
	float: left;
	margin-left: -225px;
	margin-right: 30px;
	margin-bottom: 30px;
}

But when I test in IE5.5 and IE6, this photo box runs almost completely off the left side of the browser.

The actual test page is located he http://penncomm.com/bean/inside.html

Any ideas?

This main navigation does not display properly in Safari and I was hoping somone might be able to tell me why

http://hometown.tmhdesign.com

Hello, first post here =)

I'm having a margin/border problem where it is showing up the way I want it to in IE but not in FF.

Here is the URL: http://www.prj2501.com
Here is the CSS: http://www.prj2501.com/puppetmaster.css

DOCTYPE is XHTML-STRICT

In IE you will notice the extra border below the nav followed by the padding for the content ID which places the H3 where I want it. In FF, the border and the padding are both gone.

In trying to debug this, I notice nothing I do above the H3(padding,margin,etc.) takes effect in FF...yet left and right padding do. The only way to get it to move down is BR tags and I'd rather not do that.

Any ideas, suggestions?

I am just now getting the hang of CSS so if you see anything glaring that does not seem best-practice, by all means point it out. Thanks in advance.

Hello,

I am working on a site. theweedkiller dot com

I have 3 links which are being laid out using a <ul>

The problem is the margin between home and service is fine, but the margin between services and contact seems to be double the size. I have tried adding display:inline; and it seemed to do nothing. I am getting this problem in Chrome, Firefox, and IE8. I am using a CSS reset too.

Heres is the HTML I am using -

<div id="nav">
<ul>
<li> <a href="index.html" id="current">Home</a> </li>
<li> <a href="services.html">Service</a> </li>
<li> <a href="contact.html">Contact</a> </li>
</ul>
</div> <!--end of nav div-->


Heres is the CSS I am using -

#nav ul {
margin-left:370px;
list-style-type:none;
}

#nav ul li {
float:left;
display:inline;
}

#nav ul li a {
font-family:"Myriad Pro", Arial, sans-serif;
font-size:20px;
font-weight:bold;
color:#302013;
padding:25px 50px 5px 50px;
background-image:url(images/nav.png);
background-repeat:no-repeat;
text-decoration:none;
display:inline;
margin-right:10px;!important
}

#nav ul li a:hover {
font-family:"Myriad Pro", Arial, sans-serif;
font-size:20px;
font-weight:bold;
color:#fff;
background-image:url(images/nav-over.png);
background-repeat:no-repeat;
text-decoration:none;
}

#nav #current {
font-family:"Myriad Pro", Arial, sans-serif;
font-size:20px;
font-weight:bold;
color:#fff;
background-image:url(images/nav-over.png);
background-repeat:no-repeat;
text-decoration:none;
}

I have no clue why this is happening. Any help would be useful.

Thanks!

http://www.bath.ac.uk/~su2photo/test.php

i've been playing around with the css, trying to get the page to display properly, and i get something which i'm reasonably happy with in firefox, but as always when cross checking, ie drops the ball.

this time however, the the difference doesn't seem to be consistent . The two boxes you see, should both have titles flush to the top of their containers. In ie, only one seems to manage this.

html:

PHP Code:
<div id="menubox">

&#65279;<div class="topic">
<h3>Menu</h3>
</div>

<div id="menubody">

<ul>

<li><a href="index.php?s=1">Introduction</a></li><li><a href="index.php?s=2">Organisation</a></li><li><a href="index.php?s=3">Galleries</a></li><li><a href="index.php?s=4">Communication</a></li><li><a href="index.php?s=5">Equipment</a></li>
</ul>

</div>
</div>

<div id="mainbox">

<div class="topic">
<h3>Introduction</h3>
</div>

<div id="main">

<p>

Text

<br /><br />

Text

</p>

</div>

</div> 





css:
PHP Code:
 html, body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #FFF;
    background-color: #000;
    text-align: center;

}
#logoimg{
    border: 0px;
    width: 90px;
    height: 90px;
}
div#container{
    position: relative;
    top: 50px;
    margin: 0 auto;
    text-align: left;
    width: 900px;
}
div#mainbox{
    float: left;
    padding-bottom: 15px;
    border: 1px solid #290000;
    background-color: #130000;
    width: 630px;
    text-align: center;
}
div#menubox{
    float: right;
    border: 1px solid #290000;
    background-color: #130000;
    width: 230px;
    text-align: center;
}
div#main{
    margin: 0 auto;
    width: 600px;
    text-align: left;
}
div#menubody{
    margin: 0 auto;
    width: 200px;
    text-align: left;
}
div.topic{
    text-align: left;
    background-color: #290000;
}
h3{
    padding-left: 10px;
    margin-top: 0;
}
ul{
    list-style-type: none;
    text-align: left;
} 





this one's got me fuzzled, any idea? (if my whole technique is all wrong, then can you suggest a better way?)

cheers guys

(I apologise for the length of this , i did attempt to cut it down )

been tearing my hair out with this problem

I've been doing an expanding menu for drupal and functionally it works perfect. You click on the legend, it expands the fieldset.

However I'm having major difficulties on the CSS side of things.

The problem is that when I adjust the height of the legend to fit the background image, it doesn't push the other fieldsets down in IE 7 and 8 but it does in Firefox and (oddly) IE6.

Given that means a ~20 pixel gap between menu items in Firefox compared to none in IE7,8 it means the menu always looks ugly in one of the two sets of browers.

Here's the CSS in question (displays ok in IE7,8 but spaced out in FF):

Code:

  fieldset.accordian
	{
	border:none;

	margin-top:8px;
	padding-bottom:3px;
	
	width:205px;
	}

	legend
	{
	background-image: url('images/menubg.png');
	background-repeat: no-repeat;
	margin:0;
	padding:0;
	width:205px;
	line-height:37px;
	height:37px;
	}

Weird issue with FF ive noticed can anyone explain why this happens?

I have two divs, header and nav. Nav is inside header. Now when I placed a list inside nav it pushed my header div down abit maybe 15px. However when I added the following rule...

Code:

#nav ul{
	margin-top:0px;
}

The error goes away. Strange isnt it? Heres my html and css

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>Untitled Document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="nav,5,5,false,false,0,0";
//-->
</script>
</head>
<body>
<div id="header">
	<div id="nav">
    	<ul>
        	<li>Home</li>
            <li>Browse</li>
        </ul>
    </div>
</div>

<div id="content">
  <h1 id="mainheader">Latest Templates</h1>
    <h1 class="sideheader">List One Title</h1>
    <h1 id="latesttemplates">Heres the latest templates</h1>
    <ul class="sidebarlist">
    	<li>list one</li>
        <li>list two</li>
        <li>list three</li>
        <li>list four</li>
        <li>list five</li>
    </ul>
    <h1 class="sideheader" style="top:150px">List One Title</h1>
  <ul class="sidebarlist" style="top:175px;">
    	<li>list one</li>
        <li>list two</li>
        <li>list three</li>
        <li>list four</li>
        <li>list five</li>
    </ul>
    <div id="templateholder" class="toprow" style="left:20px;"></div>
    <div id="templatedescript" class="descriptoprow" style="left:20px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template1name</td>
            </tr>
             <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template1date</td>
             </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template1type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template1images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
    </div>
    <div id="templateholder" class="toprow" style="left:185px;"></div>
    <div id="templatedescript" class="descriptoprow" style="left:185px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template2name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template2date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template2type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template2images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
  </div>
    <div id="templateholder" class="toprow" style="left:350px;"></div>
    <div id="templatedescript" class="descriptoprow" style="left:350px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template3name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template3date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template3type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template3images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
  </div>
    <div id="templateholder" class="toprow" style="left:515px;"></div>
    <div id="templatedescript" class="descriptoprow" style="left:515px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template4name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template4date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template4type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template4images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
  </div>
    <div id="templateholder" class="bottomrow" style="left:20px;"></div>
    <div id="templatedescript" class="descripbtmrow" style="left:20px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template5name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template5date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template5type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template5images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
  </div>
    <div id="templateholder" class="bottomrow" style="left:185px;"></div>
    <div id="templatedescript" class="descripbtmrow" style="left:185px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template6name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template6date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template6type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template6images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
    </div>
    <div id="templateholder" class="bottomrow" style="left:350px;"></div>
    <div id="templatedescript" class="descripbtmrow" style="left:350px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template7name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template7date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template7type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template7images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
    </div>
    
    <div id="templateholder" class="bottomrow" style="left:515px;"></div>
    <div id="templatedescript" class="descripbtmrow" style="left:515px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template8name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template8date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template8type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template8images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
    </div>
</div>
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */
body{
	margin:0px;
}

#nav{
	position:relative;
	height:35px;
	background-color:#3d3d66;
	width:405px;
	left:55%;
	top:65px;
	
}	
#nav li{
	display:inline;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	margin-right:10px;
}
#nav ul{
	margin-top:0px;
	padding-top:8px;
}
#header{
	height:100px;
	background-color:#333333;
	background-image: url(../images/jpegs/header.jpg);
	background-repeat:repeat-x;
}
#content{
	position:relative;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	height:500px;
	width:974px
}
h1#mainheader{
	margin-top:0px;
	padding-bottom:2px;
	border-bottom:dotted;
	border-bottom-width:1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	width:70%;
}
.sideheader{
	position:absolute;
	margin-top:9px;
	top:0px;
	left:75%;
	padding-bottom:2px;
	border-bottom:dotted;
	border-bottom-width:1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	width:25%;
}
h1#latesttemplates{
	position:absolute;
	margin-top:0px;
	padding-top:50px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	border-right:dotted;
	border-right-width:1px;
	width:72.7%;
	height:105%;
	top:0;
}
.sidebarlist{
	position:absolute;
	margin-top:9px;
	top:25px;
	left:695px;
}
.sidebarlist li{
	list-style-image:none;
	list-style-type:none;
}
#templateholder{
	position:absolute;
	height:105px;
	width:140px;
	border:solid 1px;
	
}	
.toprow{
	top:100px;
}
.bottomrow{
	top:330px;
}
.descriptoprow{
	top:215px;
}
.descripbtmrow{
	top:445px;
}
#templatedescript{
	position:absolute;
	width:140px;
	height:105px;
} 

#templatedescript table{
	width:140px;
}

.descrip{
	text-align:left;
	font-weight:bold;
	font-size:12px;	
	
}
.answer{
    text-align:right;
	font-size:12px;	
}
.P{
	color:#FF0000;
	text-decoration:underline;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	border-right:1px solid;
	border-right-color:#FF0000;
	margin-left:12%;
	padding-right:5px;
}
.D{
	color:#FF0000;
	text-decoration:underline;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-left:5%
}

For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div:

Code:

#content img {
margin:2px 5px 0px 0px;
}

#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}

#content a:hover img {
border:2px solid #ffffff;
}

This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them:

Code:

.g2image_float_left {
display:block;
float:left;
}

.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}

Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them.

Any ideas what is causing this?

Thanks in advance.