# layout messed up when resizing browser



## Nick-S (Mar 16, 2011)

Greetings! 

I am having a frustrating problem with my html/css page.
When I view my page on my browser, I have to zoom in (ALT and +) to align the content properly. This does not happen very often.
Second, when I re-size my browser window, the page looks messed up and ugly. Now this happens every time.

Some info
Browser: Firefox 4 (RC)
OS: Win xp + sp3 

Thanks in advance.


----------



## ehymel (Aug 12, 2007)

How about providing a link so we can see the problem? I personally don't care to open a zip file from someone I don't know.


----------



## Nick-S (Mar 16, 2011)

ehymel said:


> How about providing a link so we can see the problem? I personally don't care to open a zip file from someone I don't know.


I haven't published the site yet, but Ill try to upload the HTML and CSS files.


----------



## Nick-S (Mar 16, 2011)

It looks like I cant upload CSS and HTML files. 
I will paste my code here and Ill attach the images.

HTML:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title> My Title</title>
<link rel="stylesheet" href="style.css" type="text/css"/>

<div class="logo"</div>
<img src="example.jpg" title="example"/>

<div class="h1"><H1><b>Main title</H1></b></div>
</head>

<body bgcolor="yellow">
<body>
<div id="container">



<div class= "ul">
<li><a href="example.htmll">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example..html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example.html">example</a></li>
<li><a href="example..html">example</a></li>
</ul>
</div>

<p class="para1"><b>Example board:</b></p>

<div class="img">
<a href="example.html"><img src="example2.jpg" title="example"/></a>
<a href="example.html"><img src="example2.jpg" title="example"/></a>
<a href="example.html"><img src="example2.jpg" title="example"/></a>
<br>
<a href="example.html"><img src="example2.jpg" title="example"/></a>
<a href= "example.html"><img src="example2.jpg" title="title"/></a>
<a href="example.html"><img src="example2.jpg" title="title"/></a>
<br>
<a href="example.html"><img src="example2.jpg" title="title"></a>
<a href="example.html"> <img src="example2.jpg" title="example"/></a>
<a href="example.html"><img src="example2.jpg" title="example"/></a>
</div>

<div class="h5"><H5>
<p align="center">
<a href= "example.html">About </a> 
<a href="example.html">info </a>
<a href="example.html">contact us</a> 
<a href ="example.html">home </a>
</H5></div>

<div class="h7"> <h7></h7></div>

<div class="h2"><h2> </h2></div>
<div class="h3"><h3></h3></div>
</div>
</body>
</html>
```
CSS:

```
#container{min-width:100%; min-height:100%;}

/*Heading*/
.h1 h1{color:black; font-size:25pt;
text-align:center; text-decoration:none; 
}

/*logo*/
.logo{
text-align:center; position:absolute; top:-12px;width:95%; height:85%;
}
.logo img {height:150px; width:180px;}

/* example board*/
.ul 
{list-style-type:none; position:absolute;
top:300px; margin:0px; padding:15px; width:235px; right:-10px; text-align:left; background-color:white; font-size:16pt;} 
li:hover{color:yellow; background-color:orange; word-spacing:1px; }
a:active{color:blue; font-weight: bold;}
a:visited{color:white;}
li a:link{color:black;}

li
{display:intline;}
li:hover{text-decoration:underline; font-style:italic;}

/*icons*/
a{text-decoration:none;}
.img img
{float: center; margin:35px; padding:15px; width: 95px; height:95px;  
}

/*Fonts*/
.p p arial
{font-family: arial,times-new-roman, serif;}

/* example board top*/
.para1 
{position:absolute; top:248px; right:-1px; font-size:18pt; text-decoration:none; color:white;}

/*footing*/
.h5 H5
{position:absolute; margin: 150px; padding:40px; bottom:-300px; right:355px; font-size:12pt; word-spacing:25px;}
.h5 a:hover{text-decoration:uderline;}
.h5 a:hover{font-color:yellow;}

/* left nav*/
.h2 h2{background-color:red; right: -10px; position:absolute; top:525px; margin:-305px; padding:295px; 
z-index:-1; 
}

/*trasnparent space in the middle for the icons. */
.h3 h3{background-color:orange; margin:250px; padding:320px; position:absolute; 
bottom: -250px; right:95px; z-index:-100; 
 border:10px solid yellow;}

/* transparent element on footing*/
.h7 h7{background-color:green; margin:100px; padding:20px; position: absolute; 
bottom:-205px; z-index:-1; width:300px; left:372px;}
```


----------



## Nick-S (Mar 16, 2011)

Any ideas?


----------



## Nick-S (Mar 16, 2011)

Anyone?


----------



## ehymel (Aug 12, 2007)

The first problem is that there are so so so many errors in your code it's almost useless to try and sort through. Odd mix of xhtml and html, elements within , multiple tags... just at first glance. I'm sure there are several others. Seeing these types of errors tells me you've not really tried to fix this yourself.

You might try posting to a web-accessible temporary page, then running through the w3c html and css validators to help sort through the problems.


----------

