CSS - Margins (was Marg)

ok im having a no brainer and i cant figure out what i did wrong, can someone take a look at this and tell me how to remove the space below. im posting a link, it has the css text posted on the page with the menu im working on that im having difficulty with.

thanks in advance,

Trizen

www dot cooperativecreditsystems slash Untitled-2 dot html

apparently being a new user i cant post links but just add the dots as dots and you should be able to find it.

Anyone know why the margins change on the links when I hover over them with IE. (check left column navigation)

http://section31.us/temp/tortilla/tortilla.html

Note: This works fine on firefox, but goes ape**** on IE.

i have a left margin of 5px on the navigation links that pushes them away from the edge. however. However, for Corporate Leadership and board of directors, the second line does not indent. How can I fix this?

http://zettalogica . com/fulcrum/index.html

Also, if anyone has an opinion, do you think it would be better to keep the text for that line the same size as the other links, or would you make the text smaller so that the bar itself is the same height as all the others in the navigation.

Thank you

Hi All,

I am very new to CSS and i am working on preparing a document of an existing CSS. Can someone tell me if the margins are set as this,

margin:0px 31px 0px;

Is it top,right and bottom?

Thanks

Prena

Hello.

I'll preface this by saying that it's probably a common problem with a simple solution, but I've searched all over the net for a solution and come up empty. It's very possible that I'm using the wrong search terms, however.

Anyway, on to the issue I'm having.

I recently rebuilt a page using CSS with divs -- prior to that it had been using several nested tables and the code was getting pretty unwieldy -- and it looks great in most of the latest browsers. Except, of course, IE.

The way the page is set up, I have two container divs floated left, each one using 48% of the available width, with a 1% margin on each side. It looks perfect in every browser except for IE. In IE it seems that the only style definition that it cares to acknowledge is the float left, so both container divs get forced together on the left side with no space in between. It's not unreadable, but it's not what i want either.

Here's the style definition:

Code:

.newsTypeSection{
	width:48%;
	float:left;
	margin-right:1%;
	margin-left:1%;
	display: inline;
}

the display:inline; was something i added later as it seemed to be a proposed fix from another site. It didn't make a difference that I could see, so I just left it.

Here's an image that shows the difference. The top example is what it should look like. It looks perfect in every browser but IE.

URL

The bottom is what shows up in IE8, and probably other version of IE as well.

Can anyone help me with this? It's beyond frustrating.
Please let me know if you need more information. I can't link to the page because it's not public at the moment.

I'm working on a set of tabs within tabs (or subtabs).

My code is something like this:

Code:

 <ul class="tabs" 
            <li class="selected">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
    </ul>

 <div class="tab_content">
    <ul class="subtabs">
       <li class="selected">1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
    </ul>

Now, "tab_content" has padding of 10px, because the subtabs won't always be there. But I don't want the padding on the subtabs, so I was giving them a negative margin of -10px. This works in all browsers but IE, which applies everything but the right margin, leaving a white gap. See the image I'm attaching to see what the problem looks like. Anyone know of easy fixes for this?

Hey there.

A friend of mine was giving me a hand with the coding for http://myspace.com/457343540 but unfortunately I can't get in contact with him atm, so I thought I'd as here.

As you can see in the link provided, firefox display the margins I want, but IE throws them off a bit. I've tried a few different things, but after a couple hours I've given up trying on my own lol.

Another issue is the page is obviously stretching off the page (?idk) as the scroll bar goes off the side.

Code:

<style>
{ Music Player Properties } 
.i {display:none;}
table table td.text div object {position:absolute; top:1140px; left:50%; margin-left:-30px;}
table table td.text div object object {position:static; margin-left:0px;}
	
	
{ Background Properties } 
table, tr, td { background-color:transparent; border:none; border-width:0;} 

body { 
background-color:000000; 	background-attachment:scroll;	background-position:top center;   background-repeat:no-repeat;   background-image: url(http://bnesfinest.net/tomm/myspace/tioc/bg.jpg); 
border-top-width:0px; border-bottom-width:0px; border-left-width:0px; border-right-width:0px; border-color:none; border-style:solid; padding-left:0px; padding-right:0px;} 

.samohtlogo{
position:absolute; width: 100px; top: 20px; left: 20px; text-align: left; z-index: 10;}


.menu{ 
       width: 959px;  height: 136px;  position: absolute; top: 591px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;}

.header {
	width: 959px; 	height: 422px;	position: absolute;	top: 169px; margin-left: -480px; z-index: 0;	overflow: visible;	left: 50%;}
	   
.memberstop {
	width: 959px; 	height: 403px;	position: absolute;	top: 727px;	margin-left: -480px; z-index: 0;	overflow: visible;	left: 50%;}

.thealbum{ 
       width: 422px;  height: auto;  position: absolute;  top: 1130px;  z-index: 2;  overflow: visible;  margin-left: -480px;  left: 50%;}
	   
.musicbg{ 
       width: 541px; height: auto;  position: absolute;  top: 1130px;  z-index: 0;  overflow: visible;   margin-left: -62px;  left: 50%;}
	
.shows{ 
       width: 959px; height: auto; position: absolute;  top: 1513px;  z-index: 0;  overflow: visible;   margin-left: -480px;  left: 50%;}

.reverbshows{ 
width: 959px; height: auto; position: absolute; top: 1550px;  z-index: 2; overflow: visible; margin-left: -445px; left: 50%;}
	   
.featvideo{ 
width: 959px; height: auto; position: absolute; top: 1535px; z-index: 2; overflow: visible; margin-left: -50px; left: 50%;}
	   
.R { Div Counter Acts }
.friendSpace div { overflow:visible !important;   height:auto !important;   position:static !important;   background:none !important; }

.friendsComments div { overflow:visible !important;   height:auto !important;   position:static !important;   width:auto !important;   background:none !important; }	
	

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td{ 
background-color: !important; text-align: left; vertical-align: top; overflow: visible !important; font-size: 11px !important; line-height: 12px !important; 
text-transform: none !important; text-align: justify; letter-spacing: 0px; color: e7e2c5!important; margin: 10px !important; padding: 20px 20px 12px 0px; 
border-bottom: 1px dotted dimgrey !important; border-color: 50433d!important; _line-height: 16px !important; } 


html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td table tr td table tr td a{
	width:  110px !important;	overflow: hidden;	letter-spacing: 0px;	font-size:  10px !important;	line-height: 12px;	display:  block;	color:50433d!important;
	margin: 0 !important;	padding: 0 !important;	text-align: center !important;	margin-left: 1px !important;}


.friendSpace {
position: absolute !important;  z-index: 4 !important;  width: 800px !important;  margin-left: -320px;  _margin-left: -400px;  top: 0px !important;          margin-top: 1860px !important;
}




.friendsComments {
position: absolute !important;  z-index: 6 !important;   margin-left: -35px;  _ margin-left: -400px;  width: 833px !important;  top: 0px !important;  margin-top: 2755px !important;
}





.friendsComments a img {border: 3px; border-color: 50433d; border-style: solid;} 

.friendsComments table {width: 800px; align: justify;    position:relative;   left:0px;  }


.friendSpace a img {border: 4px; border-color: 50433d; border-style: solid;}
</style>

Hi, I have a list item that extends onto a second line. How do I keep the second line the indented more than the first line?

thanks
-S

I am having a problem with negative margins in IE7. On my website:
commentsandcapers I am trying to get IE7 to display the right two boxes in the same way that Firefox displays them??

I have tried a few thing including position: relative in a whole bunch of places, none of which works. Do any of you have any idea how to correct this problem?

Thanks!

'Ello,

I have a slight problem with some CSS I am using, it works perfectly fine in other browsers but in IE 6 it doesn't. What I basically want is the body of the page to have a 10pixel margin on the left and right of the page and 0 at the top and bottom, this bit I can do. I also want everything on the page to stretch from the end of each margin (so they basically start 10 pixels in from the left and 10 pixels in from the right), which I have got working fine. Now what I am trying to do is have one div layer stretching from the very left to the very right of the page and I am getting a bit stuck on it.

What I have managed to do is set that div layer to be absolute positioning so I can use "left: 0px;" to get it all the way up against the left hand edge, but how can I get it right up against the left hand edge? I am sure if I set it to be the width of the page so for example if the page is 500 pixels wide and I use "width: 500px;" it would go from end to end, but what I want is it to go from end to end no matter what the width of the window is. For the rest of the layers that are not going from end to end but are staying within the body margins I used "width: 100%;" which works fine, but when I try it with the one that I want to go from end to end it only goes up to the body margin, but right to the end, well in IE it does anyway other browsers are fine with it. Does anyone know how to get around this? I have tried looking on the net but I can't find anything on it. All help will be greatly welcome.

Thank you in advance, El Barto.

Hello,

I have the following issue. I need to create a full screen gray div with another white div inside it, positioned with 5 pixel margin. Basically it looks like a white div with 5px border around it. That wouldn't be a problem after i set body and html height to 100%, but here's what breaks: i add the first gray div (relatively positioned) and make it's min-height: 100%, then add lots of text and see if it autoexpands. It does! Now i add another absolutely positioned white div inside of it and set its position to 5px from each side. And now everything breaks ... doesn't autoexpand ... at least in opera. Here's the css:

Code:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#maindiv {
    position: relative;   
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    background: #777777;
}
#fullscr {
    position: absolute;
    left: 5px;
    top: 5px;
    bottom: 5px;
    right: 5px;
    background: #FFFFFF;
}

<div id="maindiv"><div id="fullscr">
lots of text with linebreaks
</div></div>

Does anyone have any ideas how to make it work?

Hi,

My current code is designed to have a flexible number of columns depending on the width of the screen. It is just divs with a left and right margin:

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>

<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
</body>
</html>

CSS:
Code:

div{
width:120px;
height:90px;
float:left;
background:#999999;
margin-left:3%;
margin-right:3%;
margin-bottom:13px;
border-style:solid;
border-width:1px;
border-color:#e2e2e2;
}

The trouble is, the right column isnt spaced correctly to the right side of the browser. Ive included an image to show more accuratly what im hoping to achieve.

Can anyone help me with this?

I am having a heck of a time with this side sub-menu. I cannot seem to get the left margins to be equal in IE 6, 7 or 8?

My html:


Code:

<!-- show_menu2 -->
 <ul id="sub_menu" class="menu" style="margin-left:-5px;position: relative; background-color:#CFF">

    <li><a href="#" class="menu-expand menu-first navlev2" title="Project">Add-ons Project</a></li>
    <li><a href="#" class="menu-expand menu-parent navlev2" title="What Modules">Modules</a>
     <ul class="ullev3">
        <li><a href="#" class="menu-sibling menu-first navlev3" title="Modules Here">Module</a></li>
        <li><a href="#" class="menu-sibling navlev3" title="Admin Tools">Admin Tools</a></li>

        <li><a href="#" class="menu-current navlev3" title="Random">Code Snippets</a></li>
        <li><a href="#" class="menu-sibling menu-last navlev3" title="Droplet of Link">Droplets</a></li>
     </ul>
    </li>
    <li><a href="#" class=" navlev2" title="AMASP">AMASP</a>    </li>
    <li><a href="#" class=" navlev2" title="Templates">Templates</a> </li>

    <li><a href="#" class="menu-last navlev2" title="Backend Pages">Backend Themes</a></li>
 </ul>

  
          </div>
                          <!-- end of subnavigation --> 

My CSS:
Code:

#submenu
{
	padding: 0;
	/* [disabled]width: 247px; */
	/* [disabled]position: relative;
*/
	/* [disabled]left: -15px; */
}
#submenu a
{
	text-decoration :none;
	color :#5b9acf;
	padding-left :12px;
	display :block;
	background-image: url(../images/bullets_micro/square3.gif);
	background-repeat: no-repeat;
	background-position: 2px 50%;
}
#submenu a:hover
{
	color :#003366;
	background-image: url(../images/bullets_micro/square1.gif);
	background-repeat: no-repeat;
	/* [disabled]background-position: 4px 50%;
*/
}
#submenu a:active
{
	border: none;
}
#submenu a.menu-current
{
	font-weight :bold;
	color :#003366;
	background-image: url(../images/bullets_micro/asst3.gif);
	background-repeat: no-repeat;
	background-position: 4px 50%;
}
#submenu ul
{
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0px;
	/* [disabled]margin-left: -25px;
*/
	/* [disabled]position: relative;
*/
	/* [disabled]left: -10px;
*/
}
#submenu ul li
{
	padding :5px 0;
	/* [disabled]line-height :1.4em; */
	font-size :12px;
	list-style-type :none;
	border-bottom :#cccccc 1px solid;
}
#submenu ul li.a
{
	padding: 0px 10px;
}
#submenu ul li li
{
	border-bottom :none;
	padding-bottom :0px;
	font-size :11px;
}
#submenu ul li li a:link,
#submenu ul li li a:visited
{
	color :#003366;
	background-image: url(../images/bullets_micro/diamond4.gif);
	background-repeat: no-repeat;
	background-position: 2px 50%;
}
#submenu ul li li a:hover
{
	background-image: url(../images/bullets_micro/diamond.gif);
	background-repeat: no-repeat;
	/* [disabled]background-position: 4px 50%;
*/
	color: #6DB9FA;
}
/* ====================== */

My test page: (pardon the blue background I just added this to see the container.)
http://new.ssmarts.org/page.html


Thanks so much.

I've got two child divs nested in a parent div. They are shown below. The problem I am having is that in IE 5.x for Mac, the top margins do not work, while the left margins are applied properly. The following script works just fine in: safari, mozilla, firefox, opera, netscape, etc. It is only in IE for mac that the top margin is not applied and the two children are positioned improperly. If anyone knows of any fixes, hacks, or just sees some junk in my code, please let me know. All help is greatly appreciated!


#parent
{
width: 700px;
height: 66px;
}

#child1
{
width: 288px;
height: 56px;
margin: 8px 0 0 10px;
background-image: url(whatever);
background-repeat: no-repeat;
float: left;
}

#child2
{
width: 115px;
height: 40px;
margin: 14px 0 0 165px;
background-image: url(whatever);
background-repeat: no-repeat;
float: left;
}