Jump to content

Positioning using the <DIV>-tag

Guest Josef_Renklint

By Guest Josef_Renklint
in CSS

 Share

Recommended Posts

Guest Josef_Renklint

Guest Josef_Renklint

Posted
Posted

Hi! I'm building a page using DIV's to position my different graphical elements.In Firefox it looks just fine, the way it's supposed to. In IE on the other hand, it looks all messed up. Let me show you the code:HTML:

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>fotografiker.se</title><link href="/includes/fotografiker.css" rel="stylesheet" type="text/css" /></head><body><div class="block"><div class="menu" align="right"><a href="/">Information</a><a href="/gallery/">Galleri</a><a href="/kontakt/">Kontakt</a></div><div class="image_content_block">Content...</div></div></body></html>

CSS:

a		{text-decoration:none; color:#000;}a:hover {color:#F19109;}div		{border: solid 2px red;}.block{	font: normal 12px/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;	position:relative;	left: 300px;	top:100px;	width:554px;	height:400px;}.menu{	position:relative;	padding:10px;	width:70px;}.image_content_block{		position:relative;	top:-78px;	left:94px;	width:446px;	height:386px;	padding-top: 10px;	padding-left: 10px;	border: solid 2px #F19109;}

IE pushes the outer border (the one of the "block" DIV) towards the bottom of the page whenever I increase the height of the inner DIV ("image_content_block"). In FF it looks just fine.IE:CSS_with_IE.gifFirefox:CSS_with_FF.gifAny ideas as to where I've gone wrong?/J

Link to comment
Share on other sites
matek Newbie

matek

Posted
Posted

Hi!I have a similar problem and don't know what to do. :) I'm building a page using layers to position elements. Everything looks just as I want it to look in Opera 8.53, Netscape 8.1 and Firefox, but I have a problem with IE6 and IE7.Here is the code of HTML:

...<body><div id="container"><div id="header"></div><div id="horizontal_line"></div><div id="content">Here is some content</div><div id="column"><ul class="navigacija"><li class="navigacija"><a class="navigacija" href="#">Link 1</a></li><li class="navigacija"><a class="navigacija" href="#">Link 2</a></li><li class="navigacija"><a class="navigacija" href="#">Link 3</a></li><li class="navigacija"><a class="navigacija" href="#">Link 4</a></li><li class="navigacija"><a class="navigacija" href="#">Link 5</a></li><li class="navigacija"><a class="navigacija" href="#">Link 6</a></li><li class="navigacija"><a class="navigacija" href="#">Link 7i</a></li></ul></div><div id="footer"></div></div></body></html>

And here is CSS:

*{margin: 0; padding: 0; border: none; text-decoration: none}body{background:#FFFFFF;text-align:center;}#container{background:url(dizajn/container.png) repeat-y;width:770px;margin:auto;text-align:justify;}#header{height:105px;background:url(dizajn/header_1.png) no-repeat;margin-top:10px;}#horizontal_line{height:25px;background:url(dizajn/links.png) no-repeat;}#footer{width:770px;font-family:Verdana;font-size:9px;color:#999999;border-top:1px solid;border-color:#BBDDFF;clear:both;}#column{background:url(dizajn/stupac.png) repeat-y;width:150px;float:left;font-family:Verdana;font-size:12px;color:#000000;text-indent:0px;text-align:justify;}#content{background:url(dizajn/sadrzaj.png) repeat-y;width:620px;float:right;font-family:Verdana;font-size:12px;color:#000000;text-indent:0px;text-align:justify;}

Layers, where are content and navigation bar, must be side-by-side but IE pushes left layer (#column) on the left below position. And that is driving me mad... :) When I open this page first I see content than I have to scroll down and then there is my navigation bar...I was on Microsoft web site to find out what to do but I am a little bit of lost wright now. I was on some other sites but... Can anyone help me, PLEASE? :)

Link to comment
Share on other sites
matek Newbie

matek

Posted
Posted

Ej! Never mind, I solve the problem... :) I was using HTML and now I have put the code in XHTML:

[color=#FF0000]<?xml version="1.0" encoding="iso-8859-1"?><!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">[/color]<head>.....</head><body>....</body></html>

And now everything looks just as I want it to look in IE6 and IE7 too.By! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...