•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 397,814 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,579 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 530 | Replies: 3
 |
•
•
Join Date: Mar 2007
Posts: 5
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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
•
•
Join Date: Jul 2005
Location: india
Posts: 143
Reputation:
Rep Power: 4
Solved Threads: 15
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
[HTML]<!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>[/HTML]
there was some probs. in CSS
use this and you probs will gone, i have only rectified your main prob.
make some fotmatings
[HTML]<!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>[/HTML]
Freelance Web Designer & Developer
Http//www.Katarey.com
Http//www.Katarey.com
•
•
Join Date: Mar 2007
Posts: 5
Reputation:
Rep Power: 0
Solved Threads: 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.
•
•
Join Date: Jul 2005
Location: india
Posts: 143
Reputation:
Rep Power: 4
Solved Threads: 15
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
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
Freelance Web Designer & Developer
Http//www.Katarey.com
Http//www.Katarey.com
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
- css menu in ie7 : a:hover behaviour only on text not on the whole box (HTML and CSS)
- Windows New Menu (Windows NT / 2000 / XP / 2003)
- Start up Menu problems (Windows NT / 2000 / XP / 2003)
- IE 6.0 doesn't show address bar, pull-down menu & short-cut icons when opened (Windows NT / 2000 / XP / 2003)
- Canot get file buttons or menu bars to display in i.e. (Web Browsers)
Other Threads in the HTML and CSS Forum
- Previous Thread: Marquee not seen by AOL users...code needed
- Next Thread: Rounded Tabs
