|
HTML - Ie6/ie7 Div Layout Mismatch
I designed a site with DIVs and everything was displaying just right on both FireFox and IE7. But when I saw the site on IE6 the DIVs didn't line up properly. It's almost as if in IE6 that the DIVs have added to them some default padding all around them, making them wider and/or heigher and causing the inconsistent layout.
The site's url is www.innotechnutrition.com Similar TutorialsI'm having a problem with a couple of cells that won't display at the same height. Firefox can do it properly but not IE7. IE7 will give it more height for no apparent reason. I'm not sure how to display my code in this post in a text box with scrollbars so I'm just gonna show the links to the relevant files. For the CSS part of the problem I've moved the CSS that controls the attributes of the problem areas to the top of the style.css page. url: www.innotechnutrition.com css: www.innotechnutrition.com/style.css P.S. Is there a program or a site I can go to where I can test my pages on all commonly used browsers? Hope someone can help as I'm tearing my hair out at the moment!! I'm working on a site for a friend, I have only ever used basic html to code my own sites, due to this I'm having problems with the layout my friend wants. I've created it with frames, not live yet but you can view it he http://www.ladin.co.uk/Jim/index2.html The layout with color either side and content in middle is how he wants it but obviously without frames, I'm not very knowledgeable where CSS is concerned so haven't a clue how to code it, thanks in advance. Linda Are there in depth tutorials on making a Div layout? Tables are making way more sense. How do you make a div float to the right of something without having it move to the bottom when a page is shrinked? How do you make a div take up space within a div that not taken out? Like in a div. 80%, inside that div is a 100px div, then have another div inside the 80% div that uses the rest of the space? and how do you fix this? http://vertion.fused.ws/div.html How would I go about laying this site out similar to this site? I don't want the bubble text in the blue banner, I want to leave that as it is on my site. Thanks for any help! Hey guys, I created a webpage with a some pictures and roll over images. The page turned out perfectly well, except when i minimize the browser size. All the images from the right push over to the left depending on the size of the browser. Why does this happen ? Thnx in advance !! Is it possible for me to upload a picture of my template I sketched and you guys tell me what I need to do in order to accomplish this? I have this gif layout http://i21.tinypic.com/140dn5l.jpg But how Do i turn it into a website or like write stuff on it with html? Please help I can do a bit of html http://i179.photobucket.com/albums/w293/Necro6666/th_****Layout.jpg Thats a link to a picture of my crappy layout going to ask a friend to make a background for me i just need a better layout if someone can help me i'll be gratful Heres the codeing HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Funt's Anime</title>
<style type="text/css">
body {
background-color: rgb(58, 95, 135);
margin-left: 10%;
margin-right: 10%;
border: 5px rgb(90, 150, 150);
padding: 30px 40px 10px 20px;
font-family: sans-serif;
}
</style>
<style type="text/css">
div.c1 {position:absolute;left:500px;top:-10px}
div.c2 {position:absolute;left:150px;top:58px;
margin-left: -5.11%;
margin-right: 55%;
border: 2px solid rgb(150, 150, 150);
padding: 0px 5px 0px 5px}
div.c3 {position:absolute;left:0px;top:58px;
background-color: rgb(205, 205, 205)}
div.c4 {position:absolute;left:0px;top:0px;
background-color: white}
div.c5 {position:absolute;left:403px;top:58px;
margin-left: -5.11%;
margin-right: 40%;
border: 2px solid red;
padding: 0px 5px 0px 5px}
div.c6 {position:absolute;left:703px;top:58px;
margin-left: -5.11%;
margin-right: 10%;
border: 2px solid green;
padding: 0px 0px 0px 0px}
</style>
</head>
<body>
<div class="c1">
<h1>Funt's Anime</h1>
</div>
<div class="c4">
<table width="1280">
<tr><td></td></tr>
</table>
<div class="c2">
<p align="center">Complete List</p>
<hr size="4" align="left" width="100%" color="gray">
<p>May, 09, 2009</p><p>The following Anime are complete:<ul>
</ul></p>
</div>
<div class="c5">
<p align="center">New Episodes</p>
<hr size="4" align="left" width="100%" color="red">
<p>The following have been added to Anime:<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>
</ul>
</div>
<div class="c3">
<table border="2">
<tr><td>Links</td></tr>
<tr><td><a href="Anime/AnimeList.html">Anime</a></td></tr>
</table>
</div>
</body>
</html>
Ok so I'm making a layout for HabbTunez and I've put my navigation into a table and when you click the picture the navigstion comes down, but everything in the table I've made is centered vertically, click Here to see what I mean. If you want more info just ask. Ok so I'm making a layout for HabbTunez and I've put my navigation into a table and when you click the picture the navigstion comes down, but everything in the table I've made is centered vertically, click Here to see what I mean. If you want more info just ask. Ok, I've made some changes to my navigation bar on my website with Fireworks so its more interactive. I've now implemented into my html but it has throw a certain part out on the page. Its the small picture thumbs at the bottom of the page, they are supposed to be in one row accross the page, now they go underneath each other. I've been looking for ages now to see the problem but I can not work it out. Here are 2 links to the pages, the first one is the one that works previously and the second is the changed one. If you can see the problem I would be so grateful, thanks. http://www.ashley-stone.co.uk/psychedelic.htm http://www.ashley-stone.co.uk/psychedelic2.htm this is the way it looks right now: http://christoffer.wicb.ots.dk/byrummet/ but i want it to look like this: also with the rounded cornors but i have tryed lot of things but cant get it to work can u help me?? I'd like to have an image "inside" a block of text such that the text surrounds it. Here's a mock-up: Is that possible? I've tried various things but no luck yet. Hello All, This is my second attempt to layout my page without using table tags. I understand many of the css tags but apparently I am still not proficient enough with css to solve the problems I've encountered. I am trying to place a column of 6 boxes on the left, a column of 6 boxes on the right of the page, a main box between the two columns, and a row of 3 boxes below the main box at the bottom of the page. All of the mentioned columns and row of boxes are encased in a container box. I was able to create the columns but not the row of boxes. Please take a look at my tags to see where I went wrong, thank you in advance for your help. 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="en" lang="en">
<head>
<title>Welcome</title>
<style type="text/css" media="all">
body {
text-align: center;
}
#Left #Right {float:left;}
#Container{
width: 1000px;
margin: 0 auto;
height: 900px;
background: white;
text-align: Left;
border-style:dashed;
border-width:3px;
border-color:black;
}
.float {
float: left;
width: 200px;
}
.float2 {
float: Right;
width: 200px;
}
.Dashed {
border-style:dashed;
border-color:black;
float:left;
width: 197px;
height: 147px
}
#Left .Dashed {
float:left;
border-width: 0px 3px 3px 0px;
border-style:dashed;
border-color:black;
}
#Right .Dashed {
float:right;
border-width: 0px 0px 3px 3px;
border-style:dashed;
border-color:black;
}
.BottomLeft{ border-style:dashed;
border-color:black;
width:197px;
height:146x;
border-style:dashed;
border-width:3px 3px 0px 0px
}
.Dashed-BottomRight{ border-style:dashed;
border-color:black;
width:194px;
height:146x;
border-style:dashed;
border-width:3px 3px 0px 0px
}
</style>
</head>
<body>
<div id="Container">
<div class="float" id="Left">
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed-bottom"></div>
</div>
<div class="float" id="Main">
<div class="BottomLeft">
</div>
<div class="BottomrRight">
</div>
</div>
<div class="float2" id="Right">
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed-Bottom"></div>
</div>
<div class="float" id="Bottom">
<div class="BottomLeft">
</div>
<div class="BottomrRight">
</div>
</div>
</div>
</body>
</html>
Okay, first of all sorry for posting so much, just I keep on running into problems with my layout that I'm making. Hmm, so I'm using the "hover", "active", and "visited" attributes for my layout that I'm creating right? When I click on the link, it turns into the automatic purple after I've visited it(or whatever color it is?). I don't want the automatic purple. I just want to keep it the same color (light blue) that it already is. I tried making it so that its blue after its visited, but what happened was that none of the "hover" tributes were applied. Can someone help me? Link: http://www.freewebs.com/noeylani94/index.htm I'm creating a banner for the top of my web site whose layout looks roughly like this: http://farm4.static.flickr.com/3098/...d89112.jpg?v=0 I created a div and put a table in it to make these divisions, but there's one problem. There is space between the cells of the table and the div. Padding and margins are set to 0 all around, as well as the table's cell padding. Here's the relevant html: Code: <div class="banner">
<table cellpadding="0">
<tr>
<td><img src="assets/images/IMG_0632f.jpg" width="375px" /></td>
<td>
<table border="1" width="375px">
<tr>
<td colspan="3" height="50px"> THE J-SLICE</td>
</tr>
<tr>
<td><img width="75px" height="50px"/></td>
<td><img width="75px" height="50px"/></td>
<td><img width="75px" height="50px"/></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and the CSS for the div: Code: div.banner {
padding: 0px;
margin: 0px;
background-color: black;
border: 1px solid red;
color: red;
}
I'd really like to get the edges of the table right up against the div, and if possible, get the two tds of the main tr directly adjacent as well. Thanks. Hi there I have a layout problem with a news listings page. The listings are database driven and some results pages are fine whereas some others break. I wonder if anyone can help me? http://www.zleeps.co.uk/news.asp?offset=30 Cheers, Kev I really don't like my layout right now. http://www.nike-dunks.net/nike-dunks...2c35315e8843cf I want my new one to look like this with the navigation bar to the left side and the boxes like where the product is. Will some one please show me how or send me to a tutorial. Thank you. |
|||||||