|
CSS - Ie Display Problems
Hello,
I am building a website for a friend/client, and I have a serious problem. When coding it, I made the mistake of checking it only in FF, and now it bugs in IE6 (I don't have any newer version so I can't tell). I was hoping someone here can point me in the right direction so I can solve this without a complete recode. I can't post the URL though, being a new user. The main issues are where-ever I use div tags. They have a problem aligning and centering where I want them. Also, I get bugs from using absolute positioning inside relatively positioned divs. Thanks, Tamir. Similar TutorialsHello all I've managed to do a nice site design with CSS and spent all day today adding things and solving problems that come to my way but now I'm desperate cause I reached a point a can't solv one problem related to the site appearence on IE. My site works great, like I want, on Firefox, but the layers don't appear right on IE. Layers get a 2/3 pixels discrepancies when using IE! Can anyone help me on this? The layout where I'm having trouble is at http://www.penaf.com/2/ I'd be really appreciated if someone helped me. Thanks in advance! hands up who hates IE !! sorry... hey all.. my problem, in Mox FF it is great however in IE it is wrong. there is a extra grey rectangle in the bottom right here is the link for you to see it http://www.fabhols.com/offers/displaylayout.htm the link to the css is here would appreciate anyone lending a hand sorting this... Thanks in advanced RF Hi guys, I've been working on my own select menu for a week or so. I've got it the way I want (I think) in all other browsers besides ie6, where the table I'm using for the title over runs and the visibility is white background instead of nothing. http://thecheckoutplace.com/practice.php Also the caching of the button always seems to be a nagging problem. Thoughts? I have created a website using html and css which displays perfectly in IE, opera and Firefox etc but... when i try and view it on my Linux computer with Firefox it is wider than the screen ( it has a horizontal scroll bar. Does anyone know what the common causes of this are ? hi, I am having problems with nav list It displays inline on firefox but not in IE..but I can not see why? any ideas?? thanks PHP Code: /* NAV */ #nav { width: 420px; height: 70px; float: right; margin: 0; padding: 0; } #nav li.on ul, #nav li.off ul { margin: 0; padding: 0; } #nav a { text-decoration: none; } #nav li { /*float the main list items*/ margin: 0; float: right; display: inline; padding-right: 0px; background: url(../images/pipe.gif) no-repeat; background-position: 0 10px; } .noback { background: none; } #nav li ul { display: none; float: right; } #nav li.off ul, #nav li.on ul { /*put the subnav below*/ position: absolute; top: 88px; *top: 104px; left: 503px; padding-top: 10px; height: 28px; width: 420px; } #nav li a { color: #155089; font-size: 20px; display: block; height: 15px; padding: 10px; background-position: 0 10px; } #nav li.on a { color: #000; background-position: 0 10px; } #nav li.on ul a, #nav li.off ul a { float: left; /*ie doesn't inherit the float*/ border: 0; color: #C1D1E0; width: auto; margin-right: 0px; font-size: 18px; line-height: 0px; background: none; } #nav li.on ul { display: block; background: none; } #nav li.off:hover ul { display: block; z-index: 6000; background: #fff; } #nav li.off a:hover, #nav li:hover a { color: #000; background: #fff; background: url(../images/pipe.gif) no-repeat; background-position: 0 10px; } #nav ul li.off a:hover, #nav ul li:hover a { color: #000; background: none; } ul#nav li.off ul li, ul#nav li.on ul li { background-image:none; } ul#nav li.off ul li a:hover, ul#nav li.on ul li a:hover { background-image:none; } ul#nav li.on a.nopipe, ul#nav li.off a.nopipe { background-image:none; } /* END OF NAV */ and the html PHP Code: <div id="divnav"> <ul id="nav"> <li class="off"><a href="#">contact</a></li> <li class="off"><a href="#">products</a> <ul> <li><a href="#">testemonials</a></li> <li><a href="#">samples</a></li> </ul> </li> <li class="off"><a href="#">about us</a> <ul> <li><a href="#">processes</a></li> <li><a href="#">plant list</a></li> <li><a href="#">benefits</a></li> <li><a href="#">features</a></li> </ul> </li> <li class="on" style = "background-image:none;"><a href="#" class = "nopipe">home</a></li> </ul> </div> thank you Hey everyone, So I'm working on a website for a client and I am running into a bit of a weird problem.. The home page displays as follows: http://www.beitelligent.com/clients/keldan/index.php As you can see, the footer is pushed to the absolute bottom - where it should be.. this is displaying correctly. I began to make sub-pages and ran into the problem, where the footer isn't pushing to the bottom.. http://www.beitelligent.com/clients/keldan/about.php - Any ideas?? Any help is appreciated. Thanks, Peter Barbosa Need assistance determining the cause of the various display issues in IE as indicated by this screen shot from 'browsershots.org': http://www.mandgweb.net/efw_php/cbc/bs_ss1.png particularly a) the pushing down of the main content and obstruction of the background image b) the explosion occurring in the 'free trial' sidebar (excessive padding, non-centered) I am not properly set up to test all platforms/browsers and have reviewed and attempted various solutions and reloading to 'browsershots' to try them. Actual site pages he http://www.mandgweb.net/efw_php/emp...rds_program.php CSS: http://www.mandgweb.net/efw_php/css/efw.css Pages display as intended on: Mac OSX 10.6.8 on Firefox/3.6.19 Safari Version 5.1 (6534.50) Chrome 13.0.782.112 Windows XP Pro (Version 2002) Firefox/4.01 Chrome 11.0.696.65 Thank you in advance for your assistance. I'm trying to update my main navigation bar for my site into a something a bit more useful and clean. I've gotten it to work pretty much exactly as I want to in FF and Opera, but of course it's displaying very wrong in IE. I thought I had found the code needed to fix IE, but I've either used it incorrectly, or it's just not the right bit of code. Here's a page with the navbar live: http://www.skullcrow.com/community_upload.php Here's the css being used: Code: /* horizontal drop down navbar - basic formatting */
#centering_wrap {width:100%; position:relative;}
#menu {margin:0 auto;width: 955px;font: bold 11px/16px arial, helvetica, sans-serif;color:#666;} /* Main width and default font properties */
#menu ul {list-style: none;margin: 0;padding: 0;float: left; line-height:42px;} /* Main format for top categories */
#menu ul ul{ position:relative; top:35px; left:5%; width: 90%;} /* child element widths */
#menu ul li{ background-position:bottom left;} /* set nav bg position */
#menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */
/* Positioning popouts (2nd level only) */
#menu li {position: relative;} /* make "ABSOLUTE" work correctly */
#menu ul ul {position: absolute; z-index: 500;} /* prevent menu from "pushing" contents down */
#menu ul ul ul {position: absolute; top: 0; left: 100%;} /* move child elements to the side */
/* Hover behavior */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
/* Additional text formatting */
#menu a {display: block;width: 100%;height: 100%;}
#menu ul ul li {
font: bold 11px/16px arial, helvetica, sans-serif;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #ccc #323E6B #456594 #323E6B ;
margin: 0;
padding: 3px 4px;
background: #2B3344;
}
#menu ul ul a {color: #CCC;text-decoration: none;}
#menu ul ul a:hover {color: #FFF;background:#06F;}
...and here's the html from the menubar (which is contained in a separate php.includes, if that matters at all): Code: <div id="centering_wrap">
<div id="menu">
<ul style="width:195px;">
<li style="background-image:url(../images/nav_com_home.png);"><a href="http://www.skullcrow.com/" alt="Home"> </a>
<ul>
<li><a href="http://www.skullcrow.com/">Storefront</a></li>
<li><a href="http://www.skullcrow.com/community_home.php">Community</a></li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_store.png);"><a href="http://www.skullcrow.com/" alt="Store"> </a>
<ul>
<li><a href="http://www.skullcrow.com/">Shirts</a></li>
<li>Hats</li>
<li>Stickers</li>
<li>Misc Stuff</li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_community.png);"><a href="http://www.skullcrow.com/community_home.php" alt="Community"> </a>
<ul>
<li><a href="http://www.skullcrow.com/forum">Forum</a></li>
<li><a href="http://www.skullcrow.com/community_upload.php">Upload Photos</a></li>
<li><a href="http://www.skullcrow.com/community_designers.php">Submit Shirt Designs</a></li>
<li><a href="http://www.skullcrow.com/skullcrow_blog">SkullCrow Blog</a></li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_help.png);"><a href="http://www.skullcrow.com/help.php" alt="Help"> </a>
<ul>
<li><a href="http://www.skullcrow.com/help.php">Contact Us</a></li>
<li><a href="http://www.skullcrow.com/forum/faq.php">FAQ</a></li>
<li><a href="http://www.skullcrow.com/aboutus.php">About Us</a></li>
</ul>
</li>
</ul>
<ul style="width:196px;">
<li style="background-image:url(../images/nav_com_otherstuff.png);"><a href="#" alt="Other Stuff"> </a></li>
</ul>
</div>
</div>
...and finally, here's the small snippet of code I used up in the header of the main php file that I thought was suppose to fix the display issue but didn't: Code: <!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(css/csshover3.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
That last bit is contained at the very of the header, and is the very last item before the </head> tag. In addition to the other 'adjustments', it's also suppose to be including the csshover3.htc file that I thought was suppose to fix a lot of display problems. The site I got that file from is he http://www.xs4all.nl/~peterned/csshover.html Whatever help is always very appreciated. I'm still sort of a css newb, although I think I'm starting to understand more, but IE is a bastard and I think most web developers would probably agree. Thanks again. Hi guys, Please help. Im very confused as to why setting display:inline in my CSS is giving me grief with text "breaking out" of the list element in FireFox???. If I give the li element a background colour clearly I can see that the text is outside the boundaries of the li element. However, if I used display:block and float:left the li item ecompasses the text just fine. My CSS is below. Thankyou in advance Code:
#navcontainer {
margin-left: 30px;
}
#navlist{
list-style: none;
padding: 0;
margin: 0;
}
#navlist li {
display: inline;
border-right: 1px solid #000;
padding: 0 0.4em 0 0.4em;
margin: 0 0.4em 0 -0.4em;
}
/*Win IE browsers - hide from Mac IE\*/
* html #navlist li
{
display: block;
float: left;
}
#navlist li a{
font-family: Garamond, "Garamond-Normal", Georgia, "Times New Roman", Times, serif;
font-size: 200%; /* set the font size for p, scaled from the body declaration */
text-decoration:none;
}
#navlist a:link, #navlist a:visited{
color: #666;
} /* unvisited link */
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
color: #000;
}
Thanks for your time. Still learning design, so thanks for your help if they are easy solutions. Border Issue: In IE and FF I have a complete border on a few header div's. The bottom and top border is different color than the left and right borders. You can see that the dark brown bottom and top borders appear to lay overtop of the white left and right borders. Website is he http://onlinecasinoboss.true2formde...e.php?page=home Styling CSS is he http://onlinecasinoboss.true2formde...aster-style.css Layout CSS is he http://onlinecasinoboss.true2formde...ster-layout.css IE Layout Issue: In FF the three center content columns display how I want it to look. When you view the same home.html page in IE you can see that they don't space out how I'd like. It is most visible by compairing the boxes on the right of the center content. Thanks a ton for your time and help, I appreciate it. I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks I'm trying to build a menu with CSS and have some problems I can't figure out. Here's what I got so far: testsite So I need some kind of workaround for InternetExplorer cause it doesn't display the fonts correctly, what do I need to change to get that right? And is there a way to automatically adjust the width of the submenu fields according to the length of the text that's written within? Here's the stylesheet: Code:
menutext { font-family:sans-serif; font-size:25px; }
subtext { font-family:sans-serif; font-size:10px; color:#707070;}
subtext2 { font-family:sans-serif; font-size:12px; color:#707070;}
subtext2:hover { color:white;}
ul{
list-style-type:none;
padding:0px;
position:relative;
}
a{
float:left;
width:137px;
text-decoration:none;
color:#27251c;
font-weight:bold;
background:#e0e0e0;
padding:5px;
border-right:1px solid #FFFFFF;
}
li { display: inline;}
a:hover { background:#27251c; color:white; }
#navi {
width:888px;
position:absolute;
margin-left:-444px;
margin-top:-13px;
left:50%;
}
#navi #aktuell a{ background:#27251c; color:white; }
And here's the html: Code: <html> <head> <title>the artist crew</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <center> <img src="images/banner.png"> </center> <div id="navi"> <ul> <li><a href="index.html"> <menutext>home</menutext> </br> <subtext>news & announcements</subtext> </a></li> <li><a href="projects.html"> <menutext>habitat</menutext> </br> <subtext>who we are, what we do</subtext> </a></li> <li id="aktuell"><a href="flow.html"> <menutext>flow</menutext> </br> <subtext>exhibitions & other works</subtext> </a></li> <li><a href="nexus.html"> <menutext>nexus</menutext> </br> <subtext>downloads & free stuff</subtext> </a></li> <li><a href="swarm.html"> <menutext>swarm</menutext> </br> <subtext>friends & affiliates</subtext> </a></li> <li><a href="hive.html"> <menutext>hive</menutext> </br> <subtext>where to get our stuff</subtext> </a></li> </ul> <ul style="top:2px;"> <li><a href="projects.html" style="width:48px;"> <subtext2>projects</subtext2> </a></li> <li><a href="conceptart.html" style="width:67px;"> <subtext2>concept art</subtext2> </a></li> <li id="aktuell"><a href="urbanart.html" style="width:53px;"> <subtext2>urban art</subtext2> </a></li> <li><a href="paintdraw.html" style="width:120px;"> <subtext2>paintings & drawings</subtext2> </a></li> <li><a href="sketches.html" style="width:53px;"> <subtext2>sketches</subtext2> </a></li> </ul> </div> </body> </html> Thanks in advance! hi, sorry for the non descriptive subject but i couldn't figure out what to say. I'm having two problems with my site, neither major but I would like to get them working. First off and more serious, I have the infamous 3px jog in IE, but for some reason the holly hack isn't fixing this one. site is at http://seektheeout.com/heroes/ if you want to see, its between the menu and the main window. rollover the menu to make it stand out more. I did figure out one method of fixing it, which was to add Code: _position: relative; left: -3px; to that item in the CSS, but thats an unpopular hack and i don't know how other browsers than IE and FireFox treat it. any thoughts on how to make the holly hack or something else easy work? 2nd problem, I would like to have the image on the right about halfway in between the 2 paragraphs. so it would look something like this: Code: texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttext texttexttexttext texttexttexttext texttexttexttext texttexttexttext texttexttexttext texttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext is this possible? I tried putting a margin-top on the image, it moved it correctly but doesn't re-adjust the text to cover the white space. any suggestions appreciated! I am pretty new to semantic HTML and just started. I used to put a lot of stuff in the html instead of the css. I have now made a semantic html website which works perfectly in IE, but not in the other browsers I've tried (FF, NN, Opera). I figure the problems must be in the css, so could you please take a look at it? In the beginning I have a DIV with a background-image, which is the banner of the page. After 160px, a horizontal menu comes on top of that and a little below there will be breadcrums. For now there 2 things to solve: 1. IE places the background/image at the top of where the DIV starts, All the other browsers place the background/image at the first actual content of the page (which is the horizontal menu). If I add a <br> or a dot at the top of the div, the background-images is moved to the right place. But I would like to do it without a <br> or a dot. Is that possible?? 2. The horizontal menu is a series of SPAN's with text in it, the width is set as 19%, and in IE this works. In the other browsers each SPAN is as wide as the text is, though it should be longer. Could you help me find the solution to these problems? The code is posted below, Sjoukje My CSS: Code:
BODY {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0; height: 100%;}
#bgimage {
background-image: url(images/CFD.jpg);
width: 800px;
height: 280px;
margin-top: 20px}
#midimage {
background-image: url(images/contentbg.jpg);
width: 800px;
height: 110%;
background-repeat: repeat-y;
overflow: hidden;}
#underimage {
background-image: url(images/contentbottom.jpg);
width: 800px;
background-repeat: no-repeat;}
#margin_top {
margin-top: 180px;}
#hoofdmenu {
width: 100%;}
.menu_item1, .menu_item2, .menu_item3, .menu_item4, .menu_item5 {
font-size: 10pt;
font-weight: bold;
width: 19%;
height: 15px;
text-align: center;
vertical-align: middle;
padding: 1px;
color: black;
text-decoration: none;}
.menu_item1 {background-color: #3CBF02; }
.menu_item2 {background-color: #0059D3; }
.menu_item3 {background-color: #FFF10C; }
.menu_item4 {background-color: #ff6c00; }
.menu_item5 {background-color: #CB0000; }
.mouseover1, .mouseover2, .mouseover3, .mouseover4, .mouseover5
{ font-size: 10pt;
font-weight: bold;
width: 19%;
height: 15px;
text-align: center;
vertical-align: middle;
padding: 1px;
color: black;
text-decoration: none;}
.mouseover1 { background-color: #45de01;}
.mouseover2 { background-color: #006cff;}
.mouseover3 { background-color: #fff998;}
.mouseover4 { background-color: #ff8400;}
.mouseover5 { background-color: #eb0101;}
a.menu {
color: black;
text-decoration: none;}
#breadcrums {
float: left;
margin-top: 35px;
margin-right: 10px;
margin-left: 200px;
font-size: 7pt;
font-weight: bold;
text-decoration: underline;
text-align: left;
color: Gray;}
p {font-size: 10pt; }
#boxes { float: left;
width:200px;
text-align:left;
padding: 23;
margin-top: -23px;}
.box110, .sub_cfd, .sub_act, .sub_art, .sub_4, .sub_cont {
background-repeat: no-repeat;
padding: 6px;
text-align: left;
font-size: 8pt;}
.box110 { background-image: url(images/menulinks110.jpg); height: 120px;}
.sub_cfd {background-image: url(images/sub_cfd.jpg);
height: 156px;}
.sub_act {background-image: url(images/sub_act.jpg);
height: 156px;}
.sub_art {background-image: url(images/sub_art.jpg); height:
156px;}
.sub_4 {background-image: url(images/sub_4.jpg); height:
156px;}
.sub_cont {background-image: url(images/sub_cont.jpg);
height: 156px;}
p.box_main_text {
font-size: 8pt;
padding: 4px;
margin-top: -10px;}
.box_top_black, .box_top_white {
font-size: 8pt;
font-weight: bold;
text-align: left;
margin-left: 5px;
margin-top: 8px;}
.box_top_black { color: black;}
.box_top_white {color: white;}
#spacer {height: 140px;}
ul.box_list {margin-left:6px; list-style-type: none;}
#content {float: right;
margin-right: 20px;
margin-top: -4px;
width: 570px;
font-size: 10pt;
text-align: left;
vertical-align: top; }
#footer {
margin-left: 210px;
text-align: center;
font-size: 8pt;
color: Gray;
height: 30px;}
p.agenda_top {
font-size: 14pt;
color: black;
text-align: left;
vertical-align: top;}
p.agenda {
font-size: 7pt;
text-align: left;
color: navy;}
ul.agenda_list {
list-style-type: none;
margin-left: 0px;}
td{
width: 13%;
height: 50px;
vertical-align: top;
background-color: white;
padding: 5px;}
The html Code: <HTML> <HEAD> <LINK rel="stylesheet" href="../simpel.css" type="text/css"> </HEAD> <BODY> <DIV align="center"> <DIV id="bgimage"> <DIV id="margin_top"> <SPAN class="menu_item1" onmouseover="this.className='mouseover1'" onmouseout="this.className='menu_item1'"> <A href="../cfd/cfd.html" class="menu">CFD</A></SPAN> <SPAN class="menu_item2" onmouseover="this.className='mouseover2'" onmouseout="this.className='menu_item2'"> <A href="../activiteiten/agenda.html" class="menu">Activiteiten</A></SPAN> <SPAN class="menu_item3" onmouseover="this.className='mouseover3'" onmouseout="this.className='menu_item3'"> <A href="../artikelen/index.html" class="menu">Artikelen</A></SPAN> <SPAN class="menu_item4" onmouseover="this.className='mouseover4'" onmouseout="this.className='menu_item4'"> <A href="" class="menu">nogiets</A></SPAN> <SPAN class="menu_item5" onmouseover="this.className='mouseover5'" onmouseout="this.className='menu_item5'"> <A href="../contact/contact.html" class="menu">Contact</A></SPAN> <DIV ID="breadcrums">><A href="../index.html">Home</A></DIV> </DIV> </DIV> <DIV id="midimage"> <DIV id="boxes" > <DIV align="center" class="sub_cfd"> <DIV><P class="box_top_white">Activiteiten:</P></DIV> <DIV> <UL class="box_list"> <LI>-CFD?!</LI> <LI>-Visie</LI> <LI>-Geloofsgetuigenis</LI> <LI>-3 Rotsen</LI> </UL> </DIV> </DIV> <DIV id="spacer"></DIV> <DIV align="center" class="box110"> <DIV><P class="box_top_white">Meer CFD</P></DIV> <DIV> <UL class="box_list"> <LI>-Webwinkel</LI> <LI>-HisBride Ministries</LI> <LI>-Forum</LI> <LI>-Creative Expressions</LI> </UL> </DIV> </DIV> </DIV> <DIV id="content"> <H2>Content</H2> <P>Content (removed for now)</p> </DIV> </DIV> <DIV id="underimage"></DIV> <DIV id="footer">© Christian Fellowship Drachten</DIV> </DIV> </BODY> </HTML> Okay, so I'm making a site and I want 3 divs on the same line. This is what I have in the .CSS: Code: #tm{
background: #000000 url(tmcont.gif) repeat-x;
width: 700px;
height: 30px;
text-align: center;
}
#tmleft{
background: url(tmleft.gif) no-repeat;
width: 4px;
height: 30px;
}
#tmright{
background: url(tmright.gif) no-repeat;
width: 4px;
height: 30px;
}
And in the HTML document: Code: <body> <div id="tmleft"></div><div id="tm"></div><div id="tmright"></div> </body> I am working on a website that was not planned out by me, but requires that a DHTML menu drop down over a Flash object. I have very little experience with this situation. I have been able to make the menus work almost perfectly within a PC environment (Internet Explorer, Netscape, Firefox). I don't have a MAC, but after viewing the page on a friend's MAC noticed that the menu does not show up in Internet Explorer, and drops down below the flash in Safari and Mozilla. I would really appreciate someone taking a look at this for me. The test web address is: http://www.cityofpetal.com/jax/index.htm Any help or tips would be very much appreciated. Thanks. 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 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. I had originally gone with the margin-top declaration, but it didn't work, so I did the whole margin declaration. Padding as a replacement for margin has also not worked. Not sure if this helps narrow the problem down at all. It seems that only the vertical margins are not applied and only in this set of divs... If anyone knows of any fixes, hacks, or just sees some junk in my code, please let me know. All help is greatly appreciated! CSS #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; } HTML <div id="header"> <div id="logo"></div> <a href="" title="View Your Shopping Cart"> <div id="shoppingCart"></div> </a> </div> |
|||||||