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
jumpink 0 Newbie Poster
katarey 27 Junior Poster
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> jumpink 0 Newbie Poster
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.
katarey 27 Junior Poster
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
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.