|
CSS - List Margins/postion In Ie
Hey all,
so, yet again IE has managed to turn what SHOULD be a simple list into a broken mess. Here's the page. Obviously not a whole lot to it. It forces the li's to the right. According to my calculations, all the math adds up as it should, and it works as it should in other browsers, and validates with a strict doctype. HTML; Code: <body> <div id="wrap"> <!-- OPENS WRAP --> <div id="header"> <!-- OPENS HEADER --> <div id="menu"> <!-- OPENS MENU --> <ul> <li>home</li> <li>profile</li> <li>portfolio</li> <li>resources</li> <li>contact</li> </ul> </div> <!-- CLOSES MENU --> </div> <!-- CLOSES HEADER --> </div> <!-- CLOSES WRAP --> </body> CSS; Code:
html, body {
height:100%;
}
body {
width:100%;
background:white url(images/header_bg.gif) repeat-x;
height:225px;
}
* {
margin:0;
padding:0;
border:0;
font-family:verdana, arial, helvetica, sans-serif;
color:white;
}
* html #wrap {
height:600px;
}
#wrap {
margin:auto;
min-height:600px;
position:relative;
width:700px;
background:white url(images/body_bg.gif) repeat-y;
}
#header {
width:700px;
background:white url(images/header.gif) no-repeat;
height:225px;
}
#menu {
width:650px;
margin:auto;
position:relative;
top:0;
z-index:200;
height:48px;
}
#menu li {
list-style:none;
width:100px;
height:24px;
margin:16px 15px 8px 15px;
float:left;
color:#294768;
font-size:10pt;
text-align:center;
}
any thoughts? thanks Similar TutorialsHi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I have a Menu thats slides down when a link is clicked. In IE6, when the div slides down, it pushes everything below it, once it's hit the top of that child div. I tried setting my z-index to 9999 for the div that comes down and over the content, and setting the child z-index to 1. But for both of those, it still pushes my #SubPage down. To see what I am talking about, if you can visit: Quidel Univ. use login ID: 2097 Once you get logged in, click on "Events". Once there, hit the "Admin Menu" link on the top-right and you'll see what I'm talking about. This is my menu container code: CSS Code: Original - CSS Code #adminContainer { width: 261px; float: left; position: relative; z-index: 9999; }
#adminContainer { width: 261px; float: left; position: relative; z-index: 9999; }
And this is my #SubPage code: CSS Code: Original - CSS Code #SubPage { float: left; width: 553px; padding: 5px; z-index: 1; }
#SubPage { float: left; width: 553px; padding: 5px; z-index: 1; }
Been playing with the positioning and z-index, but can't seem to get it to my liking.... and as I typed this, I just thought to myself , I haven't even attempted to edit my iestyles.css sheet. DOH! Going to do that, but I'll leave this up in case someone knows my stupid mistake! TIA! Hi there just wanted to ask a question. I got a table in css and i just want to know what is the command to move an image to the centre of the table. Thank you I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. I know that IE reacts to CSS different than FF or Opera etc. I 2 columns (left & right). When the page loads it shifts the columns to the right & down a few pixels. When you roll your mouse over it they go into place. This only happens in IE. Also, I have an image that is 45% transparent. I saved it as a png and gif. IE will not display it as transparent. In FF & Opera it does. Then in Opera, the background image does not center. It aligns to the top. I know that they are some hack to fix these issues. I used Google, to try an resolve my issues. I my search terms must not have been correct. Here is what I am using thus far. CSS Code: Original - CSS Code body { background-image: url(images/main-bg.jpg); background-repeat: no-repeat; background-color: #495877; background-position: center; } h3, h4 { font-family: Verdana, Arial, Helevetica, sans-serif; font-stretch: wider; color: #000; } #leftcolumn { float:left; margin-top: 22%; margin-left: 20%; width: 120px; height: 250px; border: 1px solid #FAF0E6; background-image: url(images/fade_bg.png); background-color: transparent; padding: 5px; padding-left: 8px; font-family: Poor Richard;/*Verdana, Arial, Helevetica, sans-serif;*/ font-size: small; font-color: #FFF; } * html #leftcolumn { /*IE only style*/ margin-top: 22%; margin-left: 10%; padding: 0px; padding-left: 0px; margin-right: 0px; } #leftcolumn a { padding: 3px 1px; border: 0px solid white; display: block; width: 100%; text-decoration: none; font-weight: bold; color: #000; } #leftcolumn a:hover { background-color: #cca411; } #rightcolumn { float:left; margin-top: 22%; margin-left: 6%; width: 350px; min-height: 300px; border: 1px solid #FAF0E6; background-image: url(images/fade_bg.png); font-family: Verdana, Arial, Helevetica, sans-serif; font-size: smaller; color: #FFF; padding: 5px; padding-bottom: 8px; } * html #rightcolumn { /*IE only style*/ height: 300px; } .navindent { font-family: Scholar; /*Verdana, Arial, Helevetica, sans-serif; */ font-size: 10px; text-indent: 8px; color: #000;
body {
Learning CSS has been fun!! Thank You for any suggestions. Here is the page the > Enlarge link below the picture doesn't work in FF - but it does in IE. I was wondering if it was because it was an absolute position?? Or is something else going on?? Here is the css: Code:
#productPage .compact a {
text-decoration: underline;
position: absolute;
right: 175px;
top: 200px;
}
Here is the xhtml: Code:
<span class="productImg"><img src="../images/compact.jpg" width="249" height="205" alt="Vitalograph COMPACT spirometer" /></span>
<span class="compact"><a href="../images/compact_large.jpg">>Enlarge</a></span>
Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. according to the css 2.1 spec if you specify the margin/padding of an element in ems then it takes the measurement from that element's font size, this means that * { font size: 1em; } h1 { font-size: 1.5em; margin-bottom: 1em; } gives h1 a margin of ... 1.5em ... which sucks. and is counter intuitive IMO. how is one supposed to go about having fixed margin spaces when using scalable fonts? now i know that margins overlap so theoretically setting p { margin-top: 1em; } instead would work, but only where a p lies under a h1. if i had a h1 then a h2 then a p then how large would the gap be between the h1 and the h2? and how would i control that reliably? the only way around this i can think of is this * { font-size: 1em; /*let's say this equates to 10px on the device it's being viewed on*/ } h1 { font-size: 1.5em; /*...then this would be 15px*/ margin-bottom 0.67em; /*..this would be 67% of 15px = 10px!*/ } h2 { font-size: 1.2em; /*12px*/ margin-bottom: 0.83em; /*83% of 12px = ... 10px!*/ } p { margin-botton: 1em; } Now, when i scale the font size all the margins should scale in accordance with the <p>. at least, according to my understanding of the spec. i'll try it in the next couple of hours (first thing monday morning just got to work)... anyone else thought of a scalable friendly alternative? 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 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? 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! 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. Hello, I have been having some problems with ie and auto margins, In firefox my page shows perfectly, but in ie, the page hangs to the left only showing the default margin that ie gives you. I want the page to center in the middle. The link to the page is spanglerdesign.com/test/Mulligan1 '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. 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; } I have a couple of problems. 1) I have an unwanted margin around my page. I have tried and searched everything I could to get rid of it and I cannot. Ca someone please explain why it is doing this? 2) No matter how hard I try, the Navigation list will not move to where I would like it to go (Centered in the grey area). What am I doing wrong? Code below 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"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./CSS/style1.css" /> <title>Cakefaced - Miles out of the box</title> </head> <body> <div id="Banner" /> <div id="Logo" /> <div id="NaviRear" /> <ul class="NaviLink"> <li class="NaviLink"><a class="NaviLink" href="index.html">Home</a></li> <li class="NaviLink"><a class="NaviLink" href="index.html">Projects</a></li> <li class="NaviLink"><a class="NaviLink" href="index.html">Geuestbook</a></li> <li class="NaviLink"><a class="NaviLink" href="index.html">Profile</a></li> </ul> </div> <div id="Blog" /> <div id="Links" /> </body> </html> CSS: Code:
@charset "utf-8";
/* CSS Document */
/*CSS Sheet Copyright(C) 2011 to Cakefaced.co.uk All Rights Reserved
This style sheet cannot be used without permission from Cakefaced.co.uk Administrator */
/*
-----------------------------------------------------------------------------------------------
Begin Banner Styling
-----------------------------------------------------------------------------------------------
*/
#Banner {
background-image:url('../Images/BannerRear.jpg');
background-repeat:repeat-x;
height:200px;
margin:0;
position:relative;
}
/*
-----------------------------------------------------------------------------------------------
End Banner Styling
-----------------------------------------------------------------------------------------------
*/
/*
-----------------------------------------------------------------------------------------------
Begin Navigation Styling
-----------------------------------------------------------------------------------------------
*/
#NaviRear {
background-image:url('../Images/NaviBack.jpg');
background-repeat:repeat-x;
top:150px;
height:60px;
margin:0;
position:relative;
}
ul.NaviLink {
list-style-type:none;
margin:0;
}
li.NaviLink {
display:inline;
bottom: 10px;
position:float;
}
a:link.NaviLink {
font-size:1.875em;
color:#000000; /* unvisited link */
font-family:"Arial Black", Gadget, sans-serif;
}
a:visited.NaviLink {
color:#000000; /* visited link */
}
a:hover.NaviLink {
color:#FF00FF; /* mouse over link */
}
/*
-----------------------------------------------------------------------------------------------
End Navigation Styling
-----------------------------------------------------------------------------------------------
*/
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? 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. 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 |
|||||||