I think this is a CSS issue. can anyone tell why my site http://www.web-wrtiter-articles.co.uk is showing differently in IE (where it looks fine) than firefox. The emnu is the too long and the content box pushes itself down below the left nav box in firefox.
The css for this page is:
/* CSS Document */
/* to get the secondaryNav the same as the main nav width you need to find out what 23% (it was 23% instead of 25% to give 2% gutter) of the content area is. You do this by dividing 23 by 75 and then multiplying by 100. For padding add in %. this may have to be a guess at first, but what ever you add in padding take away in overall width in %*/
body{
margin:0;
padding:0;
background-color:#CCCCCC;
}
#wrapper{
width:98%;
margin:0 auto;
border:ridge thick #666666}
#header{
float:left;
width:100%;
background-color:#FFFFFF;
}
#headleft{float:left; width:49%; }
#headright{float:left; width:49%; }
/*--------------------------------------------menu------------------------------------------*/
#menu{float:left; width:1000px; height:29px; }
ul.menu{margin:0px;padding:0px;list-style:none;width:1000px; height:28px;float:left;background: url(myimages/menu_but.jpg) repeat-x;}
ul.menu li {float:left;height:28px;}
ul.menu a{display:block; line-height:1.5em; text-decoration:none; width:1000px; font-size:16px; font:Arial, Helvetica, sans-serif;color: #FFFFFF; outline:0;}
ul.menu a:hover{ color:#FFFF00;}
/*---------------------------------------end menu------------------------------------------*/
#mainContent{
float:left;
width:1000px;
background-color:#ffffff;
}
.dept{float:left; width:33%; background-color:#ffffff; }
.intro{float:left; background-color:#ffffff; margin-top:10px; }
.service{float:left; background-color:#ffffff; margin-top:10px;}
#footer{
clear:both;
}
/*------------------------------------------pages-----------------------------------------*/
#mainNav{
float:left;
width:15%;
background-color:#99CC66;
}
#content{
float:left;
width:827px;
background-color:#339999;
}
#mainContent{
float:left;
width:65%;
background-color:#ffffff;
padding-top:30px;
padding-left:20px;
padding-right:20px;
}
.maincontent{float:left; width:95%; background-color:#00CC66; font-size:16px; color:#ffffff; padding:3px; margin-bottom:20px;}
.maincontent1{float:left; width:95%; background-color:#ffffff; font-size:14px; color:#333333; padding:17px; margin-bottom:20px;}
.maincontent2{float:left; width:70%; background-color: #FDFEC5; color:#CEFCFF; padding:17px; margin-left:15%; margin-bottom:10px; border:medium outset #FF3300;}
.maincontent3{float:left; width:90%; background-color: #FDFEC5; color:#CEFCFF; padding:17px; margin:15%; margin-bottom:10px; border:medium outset #FF3300;}
.secondaryNav{
float:right;
width:30%;
background-color:#FFFF99;
}
a.newlink:link{color:#ffffff; text-decoration:underline;}
a.newlink:visited{text-decoration:underline}
a.newlink:hover{ color:#FFFF00; text-decoration:underline;}
a.general:link{color:#0099CC; text-decoration:none;}
a.general:visited{olor:#0099CC; text-decoration:none}
a.general:hover{ color:#0033CC; text-decoration:underline;}
Paul, The input you have put into my question is really appreciated
This is really useful stuff as far as CSS goes. I think i’m one of those lazy designers who still put styling stuff in html. Whereas if i went in thinking a;; my work is going to be done in CSS it wouldbe a lot cleaner script. I will save the css sheet as a template for furure use.
Stevie,
I think I’ve solved the menu problem now - again my browser window is coming up too small.
You have a lot of inline styles and confusing sections in that page. It really needs simplifying and a more logical approach taken.
I would also set a min and max width to hold the page together.
Don’t use keywords “thin” and “thick” for border styles because browsers use different measurements for these (quite validly as the keyword size is not defined in the specs). Just use pixels and it will be the same cross browser.
Never use inline styles because that’s a maintenance nightmare. Use classes to add styles and try to use class names that make sense. Don’t overuse divs where none are needed ans use paragraphs for text.
I would do something roughly like this.
<!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>Ghostwriter, copywriter and SEO</title>
<!--<link href="style.css" rel="stylesheet" type="text/css" />-->
<style type="text/css">
/* CSS Document */
a.newlink:link {
color:#ffffff;
text-decoration:underline;
}
a.newlink:visited {
text-decoration:underline
}
a.newlink:hover {
color:#FFFF00;
text-decoration:underline;
}
a.general:link {
color:#0099CC;
text-decoration:none;
}
a.general:visited {
olor:#0099CC;
text-decoration:none
}
a.general:hover {
color:#0033CC;
text-decoration:underline;
}
html, body {
margin:0;
padding:0;
}
body {
background-color:#ccc;
padding:15px 0;
}
#wrapper {
width:98%;
margin:0 auto;
border:ridge 3px #666;
max-width:1150px;
min-width:800px;
background:#fff;
}
#header {
width:100%;
background:#fff url(http://www.web-writer-articles.co.uk/myimages/book1.jpg) no-repeat 80% 0;
}
.logo, .logo a, .logo em {
width:484px;
height:206px;
display:block;
overflow:hidden;
cursor:pointer;
position:relative;
margin:0;
}
.logo em {
background:url(http://www.web-writer-articles.co.uk/myimages/nicholas.jpg) no-repeat 0 0;
position:absolute;
left:0;
top:0;
}
/*--------------------------------------------menu------------------------------------------*/
ul.menu {
clear:both;
margin:0 0 1px;
padding:0 2%;
list-style:none;
line-height:28px;
background: url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}
ul.menu li {
display:inline;
}
ul.menu a {
text-decoration:none;
line-height:28px;
font-size:93%;
color: #fff;
outline:0;
font-weight:bold;
padding:0 20px;
}
ul.menu a:hover {
color:#FFFF00;
}
/*---------------------------------------end menu------------------------------------------*/
.dept {
float:left;
width:33%;
background-color:#ffffff;
}
.intro {
float:left;
background-color:#ffffff;
margin-top:10px;
}
.service {
float:left;
background-color:#ffffff;
margin-top:10px;
}
#footer {
clear:both;
}
/*------------------------------------------pages-----------------------------------------*/
#mainNav {
float:left;
width:158px;
min-height:789px;
background:url(http://www.web-writer-articles.co.uk/myimages/bookshelf2.jpg) no-repeat 0 0;
}
* html #mainNav {
height:789px
}
#content {
overflow:hidden;
background-color:#339999;
min-height:0;
}
* html #content {
height:1%;
overflow:visible
}
#mainContent {
float:left;
width:65%;
background-color:#fff;
padding:30px 2% 1px;
}
.maincontent {
float:left;
width:95%;
background-color:#00CC66;
font-size:16px;
color:#fff;
padding:3px;
margin-bottom:20px;
}
#mainContent .maincontent h3 {
text-align:center;
color:#fff;
font-size:16px;
}
#mainContent h3, #mainContent h2 {
text-align:center;
margin:0 0 10px;
padding:5px;
color:#333;
}
#mainContent h3 {color:#06c}
#mainContent p {text-align:justify}
#mainContent p.contact {
text-align:center;
color:#666;
}
.secondaryNav {
float:right;
width:30%;
background-color:#FFFF99;
}
.secondaryNav h3 {
text-align:center;
margin:0 0 10px;
padding:5px;
}
.secondaryNav img {
margin:15px auto 5px;
display:block;
}
#mainContent h2.highlight {
background:#FDFEC5;
border:2px outset #FF3300;
color:#000;
margin:10px auto;
padding:17px;
width:60%;
}
#mainContent h3.quality {
background:#0c6;
color:#FFF;
font-size:19px;
margin:10px auto 20px;
padding:20px 15px;
width:95%;
line-height:1.3;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="logo"><a href="#">Nick Cassells - Ghostwriting, Copywriting and internet marketing. Articles for the web at very reasonable prices. Ask me<em></em></a></h1>
<!--headright-->
<ul class="menu">
<li><a href="index.php">Home</a></li>
<li><a href="copywriter.php">Web Content</a></li>
<li><a href="thisisme.php">About me </a></li>
<li><a href="ghost_writer.php">Ghostwriter</a></li>
<li><a href="http://www.markets2000.co.uk/hostpay/more_info_addons.htm">Book lovers Blog</a></li>
<li><a href="askme.php">Contact me</a></li>
</ul>
<!--end menu-->
</div>
<!--header-->
<div id="mainNav"></div>
<!--mainNav-->
<div id="content">
<div id="mainContent">
<h3 class="quality">Do you need quality web content? <a class="newlink" href="copywriter.php"><b>Do you have a story to tell to a ghostwriter?</b></a> Need writing services? <br/>
I offer writing services at reasonable prices. Article writing, Ghostwriting, copywriting, and <a class="newlink" href="copywriter.php">Web content to get your web site seen.</a></h3>
<h2>Ghostwriting, Web content, Copywriting</h2>
<p>I love the power of the written word and creative writing. It can be used to entertain, for marketing, to train and inform, or to record events we would rather not forget. As a <a class="general" href="ghost_writer.php"><b>Ghost writer</b></a> I offer my services to people who either do not have the time to put their ideas to paper, as a <a class="general" href="copywriter.php"><b>copywriter</b></a> I write articles and web content for the internet. I use SEO techniques to optimise your web sites so they attract traffic and actually get seen!</p>
<h2><a class="general" href="ghost_writer.php">Ghostwriter services</a></h2>
<p>You do not hear about famous ghost writers all that often because by default they are meant to be invisible. A ghost writer takes the clients unique subject or idea and uses his writing skills, and publishing contacts, to create a book which will reach the appropriate target audience. </p>
<h2 class="highlight">“A professional ghostwriter can turn your ideas, dreams and precious memories into the book you thought you would never see”</h2>
<p>Authors may approach a ghost writer for many reasons. They may wish to tell of an experience in their life which they do not feel they have the skills to put into book form, or because it is such a time consuming project they may not be able to devote the time to it that a professional could. When the book is published it will be the clients name on the front of the book.</p>
<h2><a class="general" href="copywriter.php">Copywriting services</a></h2>
<p>The internet has become central to our society in the 21st century and is especially important for business marketing them. The greatest problem with the internet is getting your web site seen. Too often clients create looking web sites that highlight their products and services but give little attention to the wording, or web content.</p>
<h2 class="highlight">“A professional Internet copywriter creates web content and internet articles to attract traffic to your sight and turn visitor interest into sales”</h2>
<p>This is a great mistake as the Search Engines such as Google can only read text. Images and graphics are invisible. So, if your web content has not been analysed or includes relevant keywords your site is not going to be seen. Also web content that specialises in marketing your brand, services and product ensures interest is turned into sales.</p>
<p class="contact">Telephone: 01795 843184</p>
<p class="contact">email:njc27@sky.com</p>
<p class="contact">or for a brief chat contact me and text live by clicking live chat at the top of the page</p>
<h2><a class="general" href="ghost_writer.php">Help me write my book</a></h2>
</div>
<!--maincontent-->
<div class="secondaryNav">
<h3><img src="http://www.web-writer-articles.co.uk/myimages/generation.jpg" alt="Leave your life story and memoirs for childrens' grandchildren" title="Leave your life story and memoirs for childrens' grandchildren" />A chance to leave your memoirs for your children and your childrens children</h3>
<h3><img src="http://www.web-writer-articles.co.uk/myimages/myBook.jpg" alt="Your story and ideas in print!" title="Your book and ideas in print!" />Your book and ideas in print!</h3>
<h3><img src="http://www.web-writer-articles.co.uk/myimages/direction.jpg" alt="Re-living your life experience can be a cathartic journey" title="Re-living your life experience can be a cathartic journey" />Re-living your life can be truly therapeutic</h3>
<h3><img src="http://www.web-writer-articles.co.uk/myimages/trades.jpg" alt="Your skills and unique knowledge in print" title="Your skills and unique knowledge in print" />Your skills and in the form of a manual</h3>
</div>
<!--secondaryNav-->
</div>
<!--content-->
<div id="footer"> </div>
<!--footer-->
</div>
<!--wrapper-->
</body>
</html>
I’m seeing the main content alongside the left bar on Firefox, but in any browser, narrowing the window pushes the content below the left bar.
A few thoughts:
You’ve got some flex in the page so that it stretches at larger window sizes, but that gives an ugly green stripe between the books and the content, which doesn’t match anything else on the page. You’ve included the books image as inline content, which it shouldn’t be.
A better way would be to put the books image as a background image on the main content block, and set a big dollop of left-padding to create the gutter so that the text doesn’t go over the image. That would stop the ugly green stripe, it would make more sense when linearised, it will print better (have you seen what happens when you print?), and it will stop the content dropping below the image in narrower windows.
Another point to note is that the top menu isn’t always the same width as the page below, depending on how big your window is.
