I have a floated div inside a containing div. the containing div has 50px margins. I gave the floated div a left margin of -50px, so that it lines up along the left of the page. In IE, this cuts off half of the floated div, though, and I'm not sure of how to work around this. Please help. Here's the CSS:
#bottom {
display: block;
margin: 50px;
padding: 0;
border-width: 0;
background-color: transparent;
color: #FF0000
}
#bottom a {
color: #5555CC;
text-decoration: underline;
background-color: transparent;
cursor: pointer;
}
#bottom a:hover, #bottom a:active {
text-decoration: none;
}
#nav {
float: left;
clear: left;
width: 80px;
height: auto;
margin: 0 50px 50px -50px;
padding: 10px;
background-color: transparent;
border-width: 1px 1px 1px 0;
border-color: #FF0000;
border-style: solid;
color: #FF0000;
font-size: 14px;
font-weight: normal;
z-index: 2;
}
#nav a {
display: block;
color: #FF0000;
font-weight: bold;
font-size: 14px;
text-decoration: none;
text-align: right;
background-color: transparent;
border-width: 0;
padding: 10px;
cursor: pointer;
z-index: 10;
}
#nav a:hover, #nav a:active {
background-color: #444444;
}
html:
<div id="bottom">
<div id="nav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Bio</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"pics.html">Pics</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mp3s.html">MP3s</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"shows.html">Shows</a>
</div>
<p>
Hello!
</p>
</div>
here's a link to the live page:
<!-- m --><a class="postlink" href="http://www.radioactiverabbit.com/the_seizures/">http://www.radioactiverabbit.com/the_seizures/</a><!-- m -->
Thanks!
You may be able to use IE's stupidity against it in this case. Set your margins in CSS and use "!important" before the semicolon. Then the next line, set the margins how you want IE to display the <div> Good browsers see the !important and know to ignore any other margin declaration, so they will ignore your next margin setting. IE however doesn't seem to think it's very "important" so it will go ahead and read the next margin setting and display according to that.
There's probably a more correct way to fix this (and I'm sure someone here will provide it), but I'd bet this will work for now.Instead of using the margin, use the padding.
Here's a basic template:
<!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" xml:lang="en" lang="en">
<head>
<title>RadioActiveRabbit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
margin:0;
}
#top {
text-align:center;
margin:50px;
border:1px solid red;
}
#nav {
float:left;
width: 80px;
margin:0 50px 50px 0px;
border:1px solid red;
}
#nav div {
text-align:right;
}
#container {
margin:0px;
float:left;
}
#content {
padding:0 50px 50px 50px;
}
/*]]>*/
</style>
</head>
<body>
<div id="top">
<h1>The Seizures</h1>
</div>
<div id="container">
<div id="nav">
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Bio</a></div>
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"pics.html">Pics</a></div>
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"mp3s.html">MP3s</a></div>
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"shows.html">Shows</a></div>
</div>
<div id="content">
<p>Hello! Random stuff:</p>
<p>a;lkhsj dffffoij jdfa;lksd jfl; akjsdfl; kjjjjjjjj jjjjjjjj jjjjjjjjl;ads la;ksdjfooowjefl;a jlak;jdsfoj lkjdlf aj lkjdf l;kj alkjdf l;kaj dfl ljkj dfflkjaoijf ;lej fjlk;aj dfoija ;wlkjf oajsdf ;lio l;kajsd fiooo ja;owijefoi a;lksdjf oi lkjdf io;eaj sldkfj oi;a wejfl joi;aa jdslfjowei fjlaksjdfoooje a;lkjsdfoeaj jko;alidsj 'pj,cmv os;i ,k;ewjkioajdf ho; jlk;fd ja;iwejf ;aljsd fh;o flk;h;j f;ldkfj oi;ajew f;haisdj f;la</p>
<p>a;lkhsjdffffoijjdfa;lksdjfl;akjsdfl;kjjjjjjjjjjjjjjjjjjjjjjjjl;ads la;ksdjfooowjefl;a jlak;jdsfoj lkjdlf aj lkjdf l;kj alkjdf l;kaj dfl ljkj dfflkjaoijf ;lej fjlk;aj dfoija ;wlkjf oajsdf ;lio l;kajsd fiooo ja;owijefoi a;lksdjf oi lkjdf io;eaj sldkfj oi;a wejfl joi;aa jdslfjowei fjlaksjdfoooje a;lkjsdfoeaj jko;alidsj 'pj,cmv os;i ,k;ewjkioajdf ho; jlk;fd ja;iwejf ;aljsd fh;o flk;h;j f;ldkfj oi;ajew f;haisdj f;la</p>
<p>a;lkhsjdffffoijjdfa;lksdjfl;akjsdfl;kjjjjjjjjjjjjjjjjjjjjjjjjl;ads la;ksdjfooowjefl;a jlak;jdsfoj lkjdlf aj lkjdf l;kj alkjdf l;kaj dfl ljkj dfflkjaoijf ;lej fjlk;aj dfoija ;wlkjf oajsdf ;lio l;kajsd fiooo ja;owijefoi a;lksdjf oi lkjdf io;eaj sldkfj oi;a wejfl joi;aa jdslfjowei fjlaksjdfoooje a;lkjsdfoeaj jko;alidsj 'pj,cmv os;i ,k;ewjkioajdf ho; jlk;fd ja;iwejf ;aljsd fh;o flk;h;j f;ldkfj oi;ajew f;haisdj f;la</p>
<p>a;lkhsjdffffoijjdfa;lksdjfl;akjsdfl;kjjjjjjjjjjjjjjjjjjjjjjjjl;ads la;ksdjfooowjefl;a jlak;jdsfoj lkjdlf aj lkjdf l;kj alkjdf l;kaj dfl ljkj dfflkjaoijf ;lej fjlk;aj dfoija ;wlkjf oajsdf ;lio l;kajsd fiooo ja;owijefoi a;lksdjf oi lkjdf io;eaj sldkfj oi;a wejfl joi;aa jdslfjowei fjlaksjdfoooje a;lkjsdfoeaj jko;alidsj 'pj,cmv os;i ,k;ewjkioajdf ho; jlk;fd ja;iwejf ;aljsd fh;o flk;h;j f;ldkfj oi;ajew f;haisdj f;la</p>
<p>a;lkhsjdffffoijjdfa;lksdjfl;akjsdfl;kjjjjjjjjjjjjjjjjjjjjjjjjl;ads la;ksdjfooowjefl;a jlak;jdsfoj lkjdlf aj lkjdf l;kj alkjdf l;kaj dfl ljkj dfflkjaoijf ;lej fjlk;aj dfoija ;wlkjf oajsdf ;lio l;kajsd fiooo ja;owijefoi a;lksdjf oi lkjdf io;eaj sldkfj oi;a wejfl joi;aa jdslfjowei fjlaksjdfoooje a;lkjsdfoeaj jko;alidsj 'pj,cmv os;i ,k;ewjkioajdf ho; jlk;fd ja;iwejf ;aljsd fh;o flk;h;j f;ldkfj oi;ajew f;haisdj f;la</p>
</div>
</div>
</body>
</html>Thanks! I tried the "!important" thing first, and it works perfectly, so I'll stick with that for now.
#bottom {
display: block;
margin: 50px;
padding: 0;
border-width: 0;
background-color: transparent;
color: #FF0000
}
#bottom a {
color: #5555CC;
text-decoration: underline;
background-color: transparent;
cursor: pointer;
}
#bottom a:hover, #bottom a:active {
text-decoration: none;
}
#nav {
float: left;
clear: left;
width: 80px;
height: auto;
margin: 0 50px 50px -50px;
padding: 10px;
background-color: transparent;
border-width: 1px 1px 1px 0;
border-color: #FF0000;
border-style: solid;
color: #FF0000;
font-size: 14px;
font-weight: normal;
z-index: 2;
}
#nav a {
display: block;
color: #FF0000;
font-weight: bold;
font-size: 14px;
text-decoration: none;
text-align: right;
background-color: transparent;
border-width: 0;
padding: 10px;
cursor: pointer;
z-index: 10;
}
#nav a:hover, #nav a:active {
background-color: #444444;
}
html:
<div id="bottom">
<div id="nav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Bio</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"pics.html">Pics</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mp3s.html">MP3s</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"shows.html">Shows</a>
</div>
<p>
Hello!
</p>
</div>
here's a link to the live page:
<!-- m --><a class="postlink" href="http://www.radioactiverabbit.com/the_seizures/">http://www.radioactiverabbit.com/the_seizures/</a><!-- m -->
Thanks!
You may be able to use IE's stupidity against it in this case. Set your margins in CSS and use "!important" before the semicolon. Then the next line, set the margins how you want IE to display the <div> Good browsers see the !important and know to ignore any other margin declaration, so they will ignore your next margin setting. IE however doesn't seem to think it's very "important" so it will go ahead and read the next margin setting and display according to that.There's probably a more correct way to fix this (and I'm sure someone here will provide it), but I'd bet this will work for now.Instead of using the margin, use the padding.
Here's a basic template:
<!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" xml:lang="en" lang="en">
<head>
<title>RadioActiveRabbit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
margin:0;
}
#top {
text-align:center;
margin:50px;
border:1px solid red;
}
#nav {
float:left;
width: 80px;
margin:0 50px 50px 0px;
border:1px solid red;
}
#nav div {
text-align:right;
}
#container {
margin:0px;
float:left;
}
#content {
padding:0 50px 50px 50px;
}
/*]]>*/
</style>
</head>
<body>
<div id="top">
<h1>The Seizures</h1>
</div>
<div id="container">
<div id="nav">
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Bio</a></div>
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"pics.html">Pics</a></div>
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"mp3s.html">MP3s</a></div>
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"shows.html">Shows</a></div>
</div>
<div id="content">
<p>Hello! Random stuff:</p>
<p>a;lkhsj dffffoij jdfa;lksd jfl; akjsdfl; kjjjjjjjj jjjjjjjj jjjjjjjjl;ads la;ksdjfooowjefl;a jlak;jdsfoj lkjdlf aj lkjdf l;kj alkjdf l;kaj dfl ljkj dfflkjaoijf ;lej fjlk;aj dfoija ;wlkjf oajsdf ;lio l;kajsd fiooo ja;owijefoi a;lksdjf oi lkjdf io;eaj sldkfj oi;a wejfl joi;aa jdslfjowei fjlaksjdfoooje a;lkjsdfoeaj jko;alidsj 'pj,cmv os;i ,k;ewjkioajdf ho; jlk;fd ja;iwejf ;aljsd fh;o flk;h;j f;ldkfj oi;ajew f;haisdj f;la</p>
<p>a;lkhsjdffffoijjdfa;lksdjfl;akjsdfl;kjjjjjjjjjjjjjjjjjjjjjjjjl;ads la;ksdjfooowjefl;a jlak;jdsfoj lkjdlf aj lkjdf l;kj alkjdf l;kaj dfl ljkj dfflkjaoijf ;lej fjlk;aj dfoija ;wlkjf oajsdf ;lio l;kajsd fiooo ja;owijefoi a;lksdjf oi lkjdf io;eaj sldkfj oi;a wejfl joi;aa jdslfjowei fjlaksjdfoooje a;lkjsdfoeaj jko;alidsj 'pj,cmv os;i ,k;ewjkioajdf ho; jlk;fd ja;iwejf ;aljsd fh;o flk;h;j f;ldkfj oi;ajew f;haisdj f;la</p>
<p>a;lkhsjdffffoijjdfa;lksdjfl;akjsdfl;kjjjjjjjjjjjjjjjjjjjjjjjjl;ads la;ksdjfooowjefl;a jlak;jdsfoj lkjdlf aj lkjdf l;kj alkjdf l;kaj dfl ljkj dfflkjaoijf ;lej fjlk;aj dfoija ;wlkjf oajsdf ;lio l;kajsd fiooo ja;owijefoi a;lksdjf oi lkjdf io;eaj sldkfj oi;a wejfl joi;aa jdslfjowei fjlaksjdfoooje a;lkjsdfoeaj jko;alidsj 'pj,cmv os;i ,k;ewjkioajdf ho; jlk;fd ja;iwejf ;aljsd fh;o flk;h;j f;ldkfj oi;ajew f;haisdj f;la</p>
<p>a;lkhsjdffffoijjdfa;lksdjfl;akjsdfl;kjjjjjjjjjjjjjjjjjjjjjjjjl;ads la;ksdjfooowjefl;a jlak;jdsfoj lkjdlf aj lkjdf l;kj alkjdf l;kaj dfl ljkj dfflkjaoijf ;lej fjlk;aj dfoija ;wlkjf oajsdf ;lio l;kajsd fiooo ja;owijefoi a;lksdjf oi lkjdf io;eaj sldkfj oi;a wejfl joi;aa jdslfjowei fjlaksjdfoooje a;lkjsdfoeaj jko;alidsj 'pj,cmv os;i ,k;ewjkioajdf ho; jlk;fd ja;iwejf ;aljsd fh;o flk;h;j f;ldkfj oi;ajew f;haisdj f;la</p>
<p>a;lkhsjdffffoijjdfa;lksdjfl;akjsdfl;kjjjjjjjjjjjjjjjjjjjjjjjjl;ads la;ksdjfooowjefl;a jlak;jdsfoj lkjdlf aj lkjdf l;kj alkjdf l;kaj dfl ljkj dfflkjaoijf ;lej fjlk;aj dfoija ;wlkjf oajsdf ;lio l;kajsd fiooo ja;owijefoi a;lksdjf oi lkjdf io;eaj sldkfj oi;a wejfl joi;aa jdslfjowei fjlaksjdfoooje a;lkjsdfoeaj jko;alidsj 'pj,cmv os;i ,k;ewjkioajdf ho; jlk;fd ja;iwejf ;aljsd fh;o flk;h;j f;ldkfj oi;ajew f;haisdj f;la</p>
</div>
</div>
</body>
</html>Thanks! I tried the "!important" thing first, and it works perfectly, so I'll stick with that for now.