|
HTML - Problem With Divs In Ie
I am working on a page and everything shows up perfectly in every browser I have tried except for internet explorer, which messes everything up. Here is how the page is supposed to look: http://i140.photobucket.com/albums/r.../Picture12.png
however, here is how it looks in internet explorer. it moves the entire div underneath everything else when it should be aligned next to it: http://i140.photobucket.com/albums/r.../Picture13.png and also, in internet explorer it messes up within the div itself, but only to one of my thumbnails like so: http://i140.photobucket.com/albums/r...icture14-1.png my boss and i have been fighting with this for a while now, here is the link to the page: http://www.nba.com/sixers/dance/media.html and here is my coding for the div itself, if you need to see the rest i can post it as well <div id="dancers"> <div class="dancer"> <a href="/sixers/dance/annie.html"><img src="/media/sixers/annie_thumb.jpg" /></a> <a href="/sixers/dance/annie.html">Annie</a> </div> <div class="dancer"> <a href="/sixers/dance/chenelle.html"><img src="/media/sixers/chenelle_thumb.jpg" /></a> <a href="/sixers/dance/chenelle.html">Chenelle</a> </div> <div class="dancer"> <a href="/sixers/dance/dana.html"><img src="/media/sixers/dana_thumb.jpg" /></a> <a href="/sixers/dance/dana.html">Dana</a> </div> <div class="dancer"> <a href="/sixers/dance/danielle.html"><img src="/media/sixers/danielle_thumb.jpg" /></a> <a href="/sixers/dance/danielle.html">Danielle</a> </div> <div class="dancer"> <a href="/sixers/dance/deirdre.html"><img src="/media/sixers/deirdre_thumb.jpg" /></a> <a href="/sixers/dance/deirdre.html">Deirdre</a> </div> <div class="dancer"> <a href="/sixers/dance/erica.html"><img src="/media/sixers/erica_thumb.jpg" /></a> <a href="/sixers/dance/erica.html">Erica</a> </div> <div class="dancer"> <a href="/sixers/dance/jeaneen.html"><img src="/media/sixers/janeen_thumb.jpg" /></a> <a href="/sixers/dance/jeaneen.html">Janeen</a> </div> <div class="dancer"> <a href="/sixers/dance/jenn.html"><img src="/media/sixers/jenn_thumb.jpg" /></a> <a href="/sixers/dance/jenn.html">Jenn</a> </div> <div class="dancer"> <a href="/sixers/dance/jessica.html"><img src="/media/sixers/jessica_thumb.jpg" /></a> <a href="/sixers/dance/jessica.html">Jessica</a> </div> <div class="dancer"> <a href="/sixers/dance/julie.html"><img src="/media/sixers/julie_thumb.jpg" /></a> <a href="/sixers/dance/julie.html">Julie</a> </div> <div class="dancer"> <a href="/sixers/dance/kate.html"><img src="/media/sixers/kate_thumb.jpg" /></a> <a href="/sixers/dance/kate.html">Kate</a> </div> <div class="dancer"> <a href="/sixers/dance/lauren.html"><img src="/media/sixers/lauren_thumb.jpg" /></a> <a href="/sixers/dance/lauren.html">Lauren</a> </div> <div class="dancer"> <a href="/sixers/dance/melanie.html"><img src="/media/sixers/melanie_thumb.jpg" /></a> <a href="/sixers/dance/melanie.html">Melanie</a> </div> <div class="dancer"> <a href="/sixers/dance/melinda.html"><img src="/media/sixers/melinda_thumb.jpg"></a><br><a href="/sixers/dance/melinda.html">Melinda</a> </div> <div class="dancer"> <a href="/sixers/dance/nina.html"><img src="/media/sixers/nina_thumb.jpg" /></a> <a href="/sixers/dance/nina.html">Nina</a> </div> <div class="dancer"> <a href="/sixers/dance/vi.html"><img src="/media/sixers/vi_thumb.jpg" /></a><br><a href="/sixers/dance/vi.html">Vi</a> </div> </div> Similar TutorialsHey guys my site http://www.atlanta-web.com I have 3 <div>s which i centered using the css technique Code: margin: 0 auto; They work perfect in IE 7, FF2, FF3 but fail in IE6 any idea what i could do to make this correct? Thanks, Eric Hello, In Internet Explorer, the following page shows just fine: www.myspace.com/milqud However, in Firefox, there's small gaps between the images and Flash files. I'd like to remove these gaps. How do I go about doing this? Here's the html code I'm using: HTML Code: <img src="http://www.milqud.com/myspace/topleft.jpg" width="390" height="520" border="0"> <object enableJSURL="false" enableHREF="false" saveEmbedTags="true" allowScriptAccess="never" allownetworking="internal" type="application/x-shockwave-flash" allowScriptAccess="never" allownetworking="internal" height="520" width="410" data="http://www.milqud.com/myspace/topheader.swf"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.milqud.com/myspace/topheader.swf" /> </object> <br> <img src="http://www.milqud.com/myspace/mainbg.jpg" border=0> Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<STYLE>
#mp { border:1px solid #999; width:300px; background-color:#222; color:#999;}
#mptabpanel { float:left; width:300px; height:400px; }
#mptabcomments { background-color:#003; z-index:4; position:relative; top:0px; left:0px; }
#mptablinks { background-color:#030; z-index:5; position:relative; top:0px; left:0px; }
#mptabplaylist { background-color:#300; z-index:6; position:relative; top:0px; left:0px; }
</STYLE>
</head>
<body>
<!-- open mediaplayer --><DIV id="mp">
<DIV id="mptabpanel">
<DIV id='mptabcomments'>COMMENTS TAB</DIV>
<DIV id='mptablinks'>LINKS TAB</DIV>
<DIV id='mptabplaylist'>PLAYLIST TAB</DIV>
</DIV>
</DIV><!-- close mediaplayer -->
</body>
</html>
The three divs, "mptabcomments/links/playlist" are supposed to occupy the exact same position. (Only one of them will be visible at any time.) I've tried relative positioning and altering each div's z-index but my brain seems to have switched off here! I can't use absolute positioning because this layout is part of a bigger layout which itself is going to be absolutely positioned around the screen and I don't want to have to manually update each contained div's position every time the parent div is moved. Hi, I was trying to develop a page in HTML/CSS but having some difficulties. I have created many pages before but this one is giving me a hard time. What I have done differently this time it, i have used Positioning tags. The problem i am having is I can not set any two divs or images side by side. If i set 1 image and 1 div side by side they are being placed on top of each other. But, i may be going crazy here, i was able to place the top two divs side by side (logo and privacy_protected). Can any one please tell me what i am doing wrong or what i should do? Here is the code that i am using: Code: <body>
<div id="wrapper">
<div id="bodypic">
<div id="logo"><a href="index.html"><img src="images/transparent.png" width="319" height="100" border="0" /></a></div><!--logo -->
<div id="privacy_protected"></div><!--privacy_protected -->
<img src="images/transparent.png" height="29" width="1020"/>
<div id="728block">
<img src="images/transparent.png" height="89" width="18" style="float:left"/>
<div id="728adunit"><img src="images/728x90.jpg" width="728" height="90" /></div><!--728adunit -->
<a href="#"><img src="images/transparent.png" height="89" width="23" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="45" width="219" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="43" width="202" style="float:left"/></a></div><!--728adblock -->
</div><!--bodypic -->
</div><!--wrapper -->
</body>
And the CSS Code: #wrapper {
height: 1174px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#bodypic {
background-image: url(images/wrapper.jpg);
float: left;
height: 1174px;
width: 1024px;
}
body {
background:#FFF;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
font-size:14px;
}
a:link {
color: #06F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #06F;
}
#logo {
background-image: url(images/Editorial_v3-1_01.gif);
float: left;
height: 103px;
width: 498px;
}
#privacy_protected {
background-image: url(images/Editorial_v3-1_02.jpg);
float: left;
height: 103px;
width: 526px;
}
#728block {
float: left;
height: 91px;
width: 1024px;
}
#728adunit {
float: left;
height: 90px;
width: 728px;
}
a:hover {
text-decoration: underline;
color: #06F;
}
a:active {
text-decoration: none;
}
Please help! http://ebay.110mb.com/test/ I made some changes to the design and ended up mashing it! I just can't see where I have gone wrong .... anyone any ideas? I want to make an HTML "bar graph". This would be very simple except that I want the name of each bar to be overlaid. Again, simple, but what if the bar name is longer than the bar? Then it can't be text inside a coloured DIV, can it? Or can it? An important thing is that the graph's width will not be fixed. It'll probably take up about 40% of the page. So if the available page width is altered, the graph and it's bars will have to be re-stretched. Could somebody show me a simple example of how to "overlay" text over a DIV that not wide enough to contain it? Here's what I want: Thanks in advance for any help, Seymour. i've trouble getting my header not to interfer with my menu. I think its got something to do with my margins, but i cant figure it out. Thx for helping out a total beginner! http://wemadethis.net/blog.html i'm trying to wrap my head around floats, and implement them into a new design i'm doing. basically it's a 4 column directory listing. it looks fine when the browser is >960px, but once you resize your browser so only two columns fit horizontally, the 3rd column appears below as desired BUT it is off to the right, and the 4th column is below on the left. once you resize your browser so only one column fits horizontally, it appears correct again. any tips to fix the layout when only two columns can fit horizontally? the site is here (css is in the header for now): http://cortlandareatribune.com/test/directory.html Hello, I am using a div for my website. I would like all the content to load in the divs, I don't want to create a new page for each site.How can I do this? Also, for the portfolio,I would like the images to change when you click the arrow, but I don't want to use frames or have each image on a new page. Can I do this within the div? Thanks! http://heartless-ink.com/treegirl.html Ok, I'm completely self taught, so don't be surprise if my html is a mess. I was told recently that I'm out of date in using tables and should be using divs, so in updating my website that's what I'm trying to do. The first one is that it doesn't display properly in IE. Can anyone tell me why, and how to rectify it? http://www.ratscallions.co.uk/Test/index.html There are other problems (as you'll be able to see), but I'd like to work that one out first. Thank you, Nim Could anyone explain to me how to put rounded corners on divs? Ive researched it a bit, but i want to be able to change the colours so i dont want to use image based if possible. found a way to do it but want more than one curved div but cant seem to be able t use different colours. I want to have one large rounded div on the webpage then some smaller ones within this one for nav menus and content etc, Have found some ideas but they dont work with IE. Hello. I have problem with IE 6.0. 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>
<!- Holly hack for 3 px -->
<!--[if IE]>
<style type="text/css">
#_left, #_right, #_center { zoom: 1;}
</style>
<![endif]-->
<style type="text/css">
<!--
#_left {
float: left;
width: 200px;
color: #900;
}
#_right {
float: right;
width: 200px;
color: #00F;
}
#_center {
float: left;
width: 200px;
color: #00F;
}
-->
</style>
</head>
<body>
<div id="_left">Polyvios left menu<br />
sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_right">Polyvios right menu<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_center">ddd</div>
</body>
</html>
The result of this code must be three in line menu. (the code is an example). But IE 6.0 can't understand divs with float. Any one who knows how I can fix it? Sorry for my English. Thank you. Okay, i have a problem with divs on my site i have 4 divs, the first one is the holder, he's around the other 3. Then there are 3 divs that have to be placed next to each other, but that isn't working! When i use float left or right it tottaly screwes up my page, does anyone know what i do wrong?? my code is: HTML Code: /********** Lay-out **********/
body{
margin:0;
padding:0;
background-color:black;
font-family:Tahoma;
}
.houder{
background-color:white;
width:982px;
height:500px;
margin-left:auto;
margin-right:auto;
}
.header{
height:120px;
width:980px;
margin:0;
padding:0;
background-image:url(Afbeeldingen/header.jpg);
}
.headers{
background-image:url(Afbeeldingen/headr.jpg);
background-repeat:repeat-x;
height:21px;
width:270px;
margin-top:1px;
font-family: Tahoma;
font-size:11px;
color:white;
padding-left:10px;
padding-top:7px;
}
a{
color:black;
text-decoration:underline;
font-size:11px;
font-family:Tahoma;
}
.Contenthouder{
height:340px;
width:980px;
}
.scheiding{
background-image:url(Afbeeldingen/scheiding.jpg);
background-repeat:repeat-y;
width:5px;
height:340px;
margin-left:280px;
}
/********** Menu **********/
.menu{
background-image:url(Afbeeldingen/menu.jpg);
background-repeat:repeat-x;
width:980px;
height:14px;
margin-top:1px;
font-family: Tahoma;
font-size:12px;
padding-top:9px;
padding-bottom:10px;
}
a.menu:link, a.menu:active, a.menu:visited{
color:white;
text-decoration:none;
padding-left:10px;
padding-right:10px;
}
a.menu:hover{
background-image:none;
color:red;
text-decoration:none;
background-color:white;
}
/********** inlog **********/
.inloghouder{
width:280px;
margin-right:700px;
font-size:12px;
float:left;
}
.inlogtxt{
padding-left:20px;
font-size:11px;
}
.inloginput{
border:0;
background-color:lightgrey;
font-size:12px;
width:250px;
height:18px;
padding-top:4px;
}
.inlogknop{
background-image:url(Afbeeldingen/knop.jpg);
font-size:11px;
font-family: Tahoma;
background-color:grey;
border:0;
color:white;
font-weight: bold;
height:20px;
}
/********** Text **********/
.texthouder{
width:500px;
background-color:yellow;
height:300px;
float:right;
}
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" xml:lang="ne" lang="en">
<head>
<title>Familie Voetbalspel</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div class="houder" align="center">
<div class="header" /></div>
<div class="menu" align="left" valign="middle">
<a href="#" class="menu"><b>Home</b></a>
<a href="#" class="menu"><b>Uitleg</b></a>
<a href="#" class="menu"><b>Punten</b></a>
<a href="#" class="menu"><b>Ronde scores</b></a>
<a href="#" class="menu"><b>Klassement</b></a>
<a href="#" class="menu"><b>Spelers</b></a>
<span class="menurechts" style="margin-left:389px;"><a href="http://www.coachvanhetjaar.nl" class="menu"><b>Coach van het Jaar</b></a></span>
</div>
<div class="Contenthouder" align="left">
<div class="inloghouder">
<div class="headers">
<b>Inloggen bij het Familie Voetbalspel</b>
</div>
<div class="inlogtxt">
<br />
<b>Gebruikersnaam<br /><br />
<input type="text" name="gebruikersnaam" class="inloginput" /><br /><br />
Wachtwoord<br /><br />
<input type="password" name="wachtwoord" class="inloginput" /><br /><br />
<input type="submit" value="Inloggen" class="inlogknop"/><br /><br />
<a href="#">Wachtwoord vergeten?</a><br /><br />
<a href="#">Geen account?? Hier aanmaken!!</a>
</div>
</div>
<div class="texthouder">
</div>
<div class="scheiding">
</div>
</div>
</div>
</body>
</html>
contenthouder is the holder, inloghouder de div on the left, scheiding the div in the middle and texthouder the div on the right Can anyone help me with this code to make the page fluid in all three browsers without showing spaces in between the sections? http://www.cpe.rutgers.edu/wetlands/certificate05.html Thanks in advance Hello, I've been dealing with this problem and it seems fairly simple but has got me scratching my head. The page works fine in Firefox (of course) but internet explorer draws this problem. There are gaps between the DIVS and I have tried messing with the margins and padding a bit but have had no luck. here is the page in Firefox: Here is the code in page. HTML Code: <div id="container"> <div id="head"><a href=""><img src="hd_1.png" border="0" /></a></div> <div id="ev_top"><img src="ev_top.png" /> </div> <div class="float"><img src="ev_l1.png" /> </div> <div class="ev1"> <div class="ev2">Dallas</div> <div><a href=""><img src="ev_dallas_tba.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">May - TBA</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div><div class="float"><img src="ev_gap1.png" /></div> <div class="ev1"> <div class="ev2">New York</div> <div><a href=""><img src="ev_ny.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">04.29 - 87 Lounge</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div> <div class="float"><img src="ev_gap2.png" /></div> <div class="ev1"> <div class="ev2">Store</div> <div><img src="ev_str.png" /></div> <div class="ev3"> <div class="float"><img src="bullet_yellow.png" /></div> <div class="ev4">Coming Soon</div> <div class="ev5">| <a href="#"> Updates...</a></div> </div> </div> <div class="float"><img src="ev_right.png" /></div> </div> <div id="ev_bot"><img src="ev_bot.png" /></div> <div class="float"><img src="ev_botr.png" /> </div> </div> <div id="blog_right"><img src="blog_rt_gap.png" /></div> <div id="blog_contain"> Style sheet: Code: body{
font-family:Arial, Helvetica, sans-serif;
width:713px;
background:#cfeae7 url(bg.png);
margin:0 auto;
height:100%
}
#container{height:100%; width:750px;}
#head{text-align:center; padding-right:25px;}
.float{float:left;}
.ev1{float:left; width:211px; background:url(ev_box_bg.png); font-size:24px; text-align:center;}
.ev2{float:left;text-align:left; text-indent:6px;color:#9ce4e4;padding-top:5px;height:100%;}
.ev3{padding-left:5px;text-indent:3px; padding-top:10px; width:211px;}
.ev4{float:left; font-size:12px;color:#b1e7e7; height:100%;}
.ev5{text-align:right; font-size:12px; color:#a2e6e6; padding-right:15px;padding-bottom:9px;height:100%;}
#ev_top{padding-left:6px; margin:0px; padding-top:0px;padding-bottom:0px;}
#ev_bot{float:left; margin:0px; padding:0px;}
Any ideas? Help would be appreciated! Thanks. Hi, I'm new to this forum. I'm having a little problem. It's the first time I'm working with DIV containers. I want to place 4 containers one below the other with no spaces in-between. In Firefox it works fine but not in IE. Can this problem be fixed? /Patrick So i was looking at a sites code and thought it looked very pro, now in one section they have a 2 col results table made from divs so it might display something like, (nb: img is just a small icon image) img teamX Vs TeamY 6-2 <-- a row img teamC Vs TeamF 2-8 this pic illustrates it:- Now each row has it own "row container div" and the whole thing is within the "table container div" but then there are 4 divs (cell divs) to hold all the content, for example HTML Code: <div class="cont"><a href="?page=1">
<div style="float:left; width:38%"><img class="game" src="1.gif" /> <b><img class="flag" src=2.gif" /> teamX</b></div>
<div style="float:left; width:9%; text-align:center">vs</div>
<div style="float:left; width:38%"><img class="flag" src="3.gif" /> TeamY</div>
<div style="float:left; width:15%; text-align:right; "><b>6</b> - 2</div>
<br style="clear:both"/>
</a>
</div>
Why do they use all the cell divs, why not just put all the text and images into the "row conatiner div", it's not like the font type or size is different for the text, is this the right way to code?? Hi all I have a question which im sure is very simple to answer but has been frustrating me for three days (yes i am aware i may have prooved my own ineptitude ) If any of you have a moment could you have a look at the code below. What im trying to do is center the divs no matter what the screen resolution.Im hoping, due to my huge lack of experience, that im just missing something very obvious. Below is the code ... TEMPLATE HTML Code: body {
background-color: #000000;
}
-->
</style>
<link href="Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #b46633;
}
.style1 {
font-family: "Times New Roman", Times, serif;
font-size: large;
}
-->
</style></head>
<body>
<div id="outer">
<div align="center" id="Header"></div>
<div id="links">
<p><a href="Home.html" class="style1">Home<br />
<br />
</a><br />
</p>
</div>
<div align="center" id="Main">
<p align="center">"It does not do to leave a live dragon out of your calculations, if you live near him."<br />
<em>(JRR Tolkien - The Lord of the Rings)</em></p>
<br />
<p align="center">Throughout time since mankind begun our imaginations have activly sought out what we could not see or understand. Demons have haunted our dreams and gods have soothed them. Our minds have conjured terrible creatures for our warriors to battle and places for the adventurous to explore. One of the greatest and widest spread of these creatures is the Dragon. A true testimony to the power of imagination. This website is in dedication to the mightiest of our minds creations. The infomation found here is the result of many hours research and passion and i hope you find it useful.<br />
Welcome to Dragons Touch</p>
</div>
<div id="News">Content for id "News" Goes Here</div>
</div>
<h1 align="center"> </h1>
</body>
</html>
CSS PHP Code: body { font-family: "Times New Roman", Times, serif; background-color: #000000; background-repeat: no-repeat; color: #FFFFFF; font-size: medium; width: 100%; position: relative; left: auto; right: auto; bottom: auto; margin-right: 20px; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; } #outer { width: 80%; background-color:#FFFFFF; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; } #Header { position: absolute; height: 150px; width: 800px; left: 121px; top: 0px; background-image: url(../Images/NewBanner.jpg); color: #F0F0F0; background-color: #000000; background-repeat: no-repeat; margin: 0px; } Links { top: 150px; position: relative; height: 350px; width: 150px; bottom: auto; } #links { top: 151px; height: 350px; width: 126px; clip: rect(auto,auto,auto,auto); position: absolute; font-family: "Times New Roman", Times, serif; padding-top: 50px; font-size: large; font-weight: normal; font-style: normal; text-transform: none; padding-left: 40px; text-align: left; list-style-position: inside; left: 41px; margin: 0px; } #Main { font-family: "Times New Roman", Times, serif; position: absolute; height: auto; width: 620px; left: 208px; top: 151px; right: 800px; margin: 0px; } #News { position: absolute; left: 829px; top: 151px; width: 162px; height: 406px; margin: 0px; is it possible to have div #1 which is 500 x 500 and div #2 which is also 500 x 500 directly above div #2 (rather than below or next to it)? i am thinking of using the z-index to making this happen... am i on the right track? so div #2 will have a z-index which is greater than that of div #1 I think this is a html question, though if it needs to be moved to CSS please let me know. Basically, I'm using divs for the first time. I've got the same rough layout for each page on the site, but in one of them I need to insert a table. When I insert the table it puts a great big gap in the div just above where the table starts. Why is it doing that? Can I stop it? How do I get around this? Help! Nim |
|||||||