0

This is my first attempt at going tableless. Here is a link to my site http://www.precisemessenger.com/private/help1.html
1. The left menu disappears when the browser is resized smaller in ff.
2. The title and subtitle text scrunches up when the browser is resized smaller in ff.
3. Everything becomes blue when the browser is resized smaller in ie6 or 7
4. Thumbnail image hover outline not working in ie6.
Any suggestions to fix these problems or design ideas are greatly appreciated.
Thanks,
Kevin

2
Contributors
3
Replies
4
Views
10 Years
Discussion Span
Last Post by katarey
0

HI There,

there was some probs. in CSS

use this and you probs will gone, i have only rectified your main prob.
make some fotmatings :)

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body
	{
		height:100%;
		margin:0px;
		padding:0px;
	}
#header 
	{
		letter-spacing: normal;
		background-color: #708090;
		clear:both;
	}
#header h1 
	{
		font-size: 350%;
		color: #fff;
		margin: 0;
		background: #708090;
		padding-top: 0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 10px;
		letter-spacing: normal;
	}

.subtitle 
	{
		font-size: 165%;
		color: #c6ccd3;
		padding: 4px 0 0 10px;
		margin: 0;
		background: #708090;
		color: #c6ccd3;
		font-weight: bold;
		font-style: italic;
		letter-spacing: normal;
		border-bottom-color: #666666;
		border-bottom-style: solid;
	}
ul#navleft {
	width: 158px;
	\width: 160px;
	w\idth: 158px;
	padding: 10px 0;
	margin: 0;
	font: normal 75% arial,verdana,helvetica,sans-serif;
	border-top-width: 0px;
	border-top-color: #EBE9ED;
	border-right-color: #EBE9ED;
	border-bottom-color: #EBE9ED;
	border-left-color: #EBE9ED;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-left: 5px;
}
ul#navleft li a {display: block;width: 162px;\width: 198px;w\idth: 162px;padding: 4px 8px 4px 8px;border: 0;border-left: 3px solid #ffe47a;text-decoration: none;font-weight: normal;outline:none;}

ul#navleft li a:link 
{ 
	color: #666666;
	font-weight: normal;
	outline:none;
}
ul#navleft li a:hover {border-color: #fff;color: #ffffff;background: #4e5965;}

.leftbox a,.leftbox a:link,.leftbox a:active,.leftbox a:visited 
{
background: url(images/read_more.gif) no-repeat;
height: 21px;
width: 72px;
color: #4e5965;
font-weight: normal; 
text-decoration: none;
text-align: center;
display: block;
outline: none
}
.button {margin: 10px 0 10px 0;}
#navTop
	{
		float:left; width:700px; clear:right;
	}
#navTop ul{padding-left:0;margin: 0;color: #fff;float: left;width: 100%;font-family: verdana, arial, geneva, helvetica, sans-serif;font-size: 114%;}

#navTop ul li { display: inline; }

#navTop ul li a{padding: 0.1em 1em 0.3em 1em;color: #000000;text-decoration: none;float: right;border-left: 1px solid #fff;outline:none;font-weight: bold;}

#navTop ul li a:hover{color: #ffe47a;text-decoration: underline;}
#greenbox {
	background-color: #9DACBF;
	color: #FFFFFF;
	padding: 5px;
	margin: 5px;
	margin-right: 102px;
	margin-top: 25px;
}
-->
</style>
</head>
<body>
<div id="header">
  <h1>My Site.com</h1>
  <div class="subtitle">SUBTITLE HEADER </div>
</div>
<div style="float:left; width:200px; ">
  <ul id="navleft">
    <li><a href="/item1.htm">item1</a></li>
    <li><a href="/item2.htm">item2</a></li>
    <li><a href="/item4.htm">item3</a></li>
    <li><a href="/item5.htm">item4</a></li>
    <li><a href="/item6.htm">item5</a></li>
    <li><a href="/item7.htm">item6</a></li>
  </ul>
  <div class="leftbox">
    <h4>News:</h4>
    <div class="leftboxtext">
      <p class="button"><a href="#sitename">Read more</a></p>
      <hr class="hr" />
      <p class="button"><a href="#sitename">Read more</a></p>
    </div>
  </div>
</div>
<div style="float:left; clear:right; width:700px;">
  <div id="navTop">
    <ul>
      <li><a href="#sitename">Contact</a></li>
      <li><a href="#sitename">About Us </a></li>
      <li><a href="index.html">Home</a></li>
    </ul>
  </div>
  <div id="greenbox"><strong>Welcome to Mysite.com</strong></div>
  <div id="gallery"> <a class="toggleborder" href="http://www.google.com/"> <img border="2" src="images/img1.jpg" width="190" height="181" /> </a> <a class="toggleborder" href="http://www.google.com/"> <img border="2" src="images/img1.jpg" width="190" height="181" /> </a> <a class="toggleborder" href="http://www.google.com/"> <img border="2" src="images/img1.jpg" width="190" height="181" /> </a> <a class="toggleborder" href="http://www.google.com/"> <img border="2" src="images/img1.jpg" width="190" height="181" /> </a> <a class="toggleborder" href="http://www.google.com/"> <img border="2" src="images/img1.jpg" width="190" height="181" /> </a> <a class="toggleborder" href="http://www.google.com/"> <img border="2" src="images/img1.jpg" width="190" height="181" /> </a> <a class="toggleborder" href="http://www.google.com/"> <img border="2" src="images/img1.jpg" width="190" height="181" /> </a><a class="toggleborder" href="http://www.google.com/"> <img border="2" src="images/img1.jpg" width="190" height="181" /> </a><a class="toggleborder" href="http://www.google.com/"> <img border="2" src="images/img1.jpg" width="190" height="181" /> </a> </div>
</div>
</body>
</html>
0

Thanks for the code. It works well in IE7 but in ff the images are just little lines and the top nav bar and greenbox shift when resizing the browser.

0

Well,

there in ff the images are just little lines because you don't have that images, put the right name of images and your problem will gone,

the topnav bar and greenbox shift when resizing the browser.

Because topnav is 200px Wide and greenbox is 700px,

total 900px,

when browser resize less then 900px, greenbox will sift down you can rectify this by adding a div with width:900px there

<body>
<div id="header">
<h1>My Site.com</h1>
<div class="subtitle">SUBTITLE HEADER </div>
</div><div style="width:900px;">
<div style="float:left; width:200px; ">
<ul id="navleft">
<li><a href="/item1.htm">item1</a></li>
<li><a href="/item2.htm">item2</a></li>
<li><a href="/item4.htm">item3</a></li>
<li><a href="/item5.htm">item4</a></li>
<li><a href="/item6.htm">item5</a></li>
<li><a href="/item7.htm">item6</a></li>
</ul>
<div class="leftbox">
<h4>News:</h4>
<div class="leftboxtext">
<p class="button"><a href="#sitename">Read more</a></p>
<hr class="hr" />
<p class="button"><a href="#sitename">Read more</a></p>
</div>
</div>
</div>
<div style="float:left; clear:right; width:700px;">
<div id="navTop">
<ul>
<li><a href="#sitename">Contact</a></li>
<li><a href="#sitename">About Us </a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>
<div id="greenbox"><strong>Welcome to Mysite.com</strong></div>
<div id="gallery">IMAGES</div>
</div></div>
</body>

By this greenbox will not shift down, but if you resize the browser down(less then 900px) Horizontal scrollbar will Appear in browser

hope this will work for you,

I am sure you may find more way to do this, i have given a idea ;)

Rahul

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.