CSS - Margin-top Issue

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?

Remove.

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

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

Please look at this layout

Layout Example

In IE7 there is a gap between the footer and upper divs that I am not sure what is causing.

The other issue I would appreciate help with is the #right div element. When the #content div has a higher height I want the #right div element to stretch with it (and vice versa). Any help would be appreciated.

Tom

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 )

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!

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.

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%
}

Heya guys,

Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done.

I've got this in style.css file:

Code:

/* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}

.topform {
	position: absolute;
	right: 5px;
	top: 65px;
	width: 300px;
	font-size: 10px;
	font-family: myriad, verdana, sans-serif;
	text-align: right; }
	
input, form {
	font-size: 11px;
	font-family: myriad, verdana, sans-serif;
	margin-bottom: 0px;
	margin: 0px; }
/* End of SEARCH Bar */

Which refers to this part of my index.php page:

Code:

  <!-- Top right SEARCH -->
  <div class="topform"> 
    <div class="lb_bl"> 
      <div class="lb_br"> 
        <div class="lb_tl"> 
          <div class="lb_tr">
            <form name="form" id="form" method="post" action=""><input name="search" type="text" />
            <input name="search" type="button" value="SEARCH" /></form>
          </div>
        </div>
      </div>
    </div>
    <div class="clear">&nbsp;</div>
  </div>
  <!-- End of top right SEARCH -->

But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com

Thanks in advance to anyone who can help - Gaz

Hi!

Should I do this?

p
{

margin-top: 2em;
margin-bottom: 2em;

}

or this:

p
{

margin-bottom: 2em;

}


Same question for headers (h1, h2, etc)


Thanks!

Hi all

Take a look at this in Firefox and then in IE7:

http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html

The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't.

Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem.

I did a search and found this link:

http://www.positioniseverything.net/explorer/floatIndent.html

Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way?

Thanks a lot for help :-)
Josh

Hi there,

I have recently stumbled about a problem I had with another website I made as well, but since it was at the very bottom back then I kinda ignored it. My new website has this right in the header though, and so I decided to ask for help. Works perfectly in Gecko based browsers, though.

I have the problem that I have to Div's right after each other which both have a top and bottom margin of zero, but there is a visible gap between them, only in IE though (header and content as well as content and footer) and in Opera 7.54 at the very bottom. The colors of the background PNG are also broken in IE, never mind that, will exchange that with a JPG.

Website in question is http://cyxxon.com, WordPress with my own template. Had the same problem with a website completely handcoded by me.

Any ideas?
Thomas