 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 413
|
 Posted: Thu Feb 07, 2008 11:36 am site works in FF but not IE |
 |
|
|
I had no problems with this before, but my site looks OK in FF but in IE it is all squashed up at the top. I will load it up, but give me a few minutes to do that. The code is:
| Code: |
* { margin:0; padding:0;}
body{
font-family:Verdana, sans-serif;
font-size:.88em;
color:#000000;
text-align:center;
background-image:url('images/background3.jpg');
background-repeat:repeat-x;}
#container {
width: 750px;
height: 100%;
text-align: left;
background-color: #FFFFFF;
border: 2px double #F5F5F5;
margin-top: 5px;
margin-bottom: 5px }
#header {
background-image: url('images/stripe.gif');
height: 90px; width: 750px;
background-repeat: repeat;
margin-bottom: 5px;
padding: 0;}
.vmenu{
font: bold 12px Verdana;
width: 100%;
margin-bottom: 0;
padding-bottom:0; }
.vmenu ul{
margin: 0;
padding: 0;
float: right;
width: 750px;
background: white url(images/indentbg.gif) center center repeat-x;}
.vmenu ul li{display: inline;}
.vmenu ul li a{
float: right;
color: white;
padding: 11px;
text-decoration: none;
border-right: 1px solid #FFFFFF; }
.vmenu ul li a:visited{color: black;}
.vmenu ul li a:hover, .vmenu ul li .current{color: black; background: white;}
#date { height: 20px;
float: right;
font-style: italic;
font-face: verdana;font-size: 0.75em;
width: 190px;
color: #666666; }
#search {
margin-left: 3px;
margin-bottom: 10px;
margin-top: 10px;}
#navigation {
float:left; width: 137px; margin-left: 2px; margin-top: 5px;}
#menu {
list-style-image: url('images/arrow.gif');
background-repeat: no-repeat;
font-size: 0.75em;
color: #5B5B5B; margin-top: 0px;
padding-left: 20px;
background-position: 2.0em 50% }
#menu a {
border-bottom: 1px solid #00FF00;
padding: 3px;
display: block;
margin:2px 0 0 0; }
#menu a:hover { background-color: #EBEBEB }
#menu a:visited { color: #666666;}
#centercontent {
float: left;
width: 400px;
display: inline;
margin-top: 30px;
margin-left: 30px; }
#rightcontent{
width: 127px;
float: right;
background-image: url('images/longbox.gif');
background-repeat: no-repeat;
height: 900px;
text-align: center;
font-size: 0.75em;
margin:2px;
padding-top:20px;}
#footer{ clear:both; height:50px; text-align:center;
font-size: 0.66em; background: #FCFCFC;}
#footer p { padding-top:10px;}
#smallbox {
background-position: left center;
background-image: url('images/smallbox.gif');
width: 120px;
height:650px;
font-size: 0.75em;
background-repeat:no-repeat;
margin-left: 3px;
padding: 28px 10px 0 5px;}
#rightarea { float: left; width: 137px; margin: 7px;}
#rightareasecond {
float: left;
width: 189px;
margin: 10px; }
#leftareasecond {
float: left;
width: 189px;
margin: 10px; }
#leftarea {
float: left;
position:relative;
width: 137px;
margin: 5px;
display: inline; height:1%;}
.tutorials { list-style-type: none; background: #F4F4F4;}
#centerarea {
float: left;
width: 134px;
margin:10px; }
#bottom { clear: both;}
#content {
width:100%;
margin-top:5px; }
ol.paragraph {
list-style-type: decimal;
margin: 10px;
padding: 15px;
font-family: arial;
font-size: 0.75em; }
ol.links { list-style-type: none;}
.odd { background-color: #EEE;}
#form {
padding: 30px; background-color:#F2FFF2; }
h1 {
font-size: 1.50em;
color:#000000;}
h2 {
font-size: 1.25em;
color: #008C00; }
h3 {
color: #808080;
font-size: 1.00em; }
ul { list-style-type: none; }
a:link { text-decoration: none; color:#006600;}
a:visited { text-decoration: none; color: #666666; }
a:hover, a:active { text-decoration: none; border-bottom: dotted 1px;
color: #004600;}
img { border: none; }
img.floatleft { float: left; margin:10px; }
img.floatcenter { margin-left: 150px;}
img.center { margin-left: 13px;}
img.floatright { float: right; margin: 10px;}
li.italic {font-style: italic; font-size: 0.75em;}
p.italic {font-style: italic;}
p.padding {padding: 10px;}
p.blue {color: blue;}
p.donate { padding: 0; text-align: center;}
p.search { padding-top: 0; padding-bottom: 0; }
p.normal { padding-bottom: 5px; }
p { padding-bottom: 20px;}
p.right { float:right; }
p.grey { background-color: #F4F4F4; color: #000000; padding: 5px; }
p.text { font-family: arial; font-size: 0.75em; }
p.shaded {background-color: #BFDFFF; font-family: arial; font-size: 0.75em; }
p.textindent { font-family: arial; font-size: 0.75em; text-indent: 15px; }
p.heading {background-color: #99CCFF; text-align: center;width: 200px; font-size: 0.88em; font-family: arial;}
.desktoplist {
color: #000000;
padding: 5px;
background-color: #F4F4F4;
list-style-type:circle; list-style-position:inside; }
.listing {
color: #000; width: 380px;
list-style-type: square; list-style-position:inside;
padding-left: 5px; margin:
10px; background-color: #F4F4F4; } |
and the html is:
| Code: |
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylessheet_copy(1).css">
</head>
<body>
<div id="container">
<div id="header">
<img src="images/logo.gif" width="300" height="90" alt="header/logo">
<div class="vmenu">
<ul>
<li><a href="sitemap.htm">sitemap</a></li>
<li><a href="privacy.htm">privacy</a></li>
<li><a href="about.htm">about</a></li>
<li><a href="vassistant.htm">v.assistant</a></li>
<li><a href="tutorials.htm">tutorials</a></li>
<li><a href="contacts.htm">contacts</a></li>
<li><a href="index.htm">home</a></li>
</ul>
</div>
</div>
<div id="date">
<script type="text/javascript"><!--
var now = new Date(); var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months = new Array('January','February','March','April','May','June','July','August','September',
'October','November','December'); var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) { return (number < 1000) ? number + 1900 : number;
}today = days[now.getDay()] + ", " + months[now.getMonth()] + " " +
date + ", " + (fourdigits(now.getYear())) ; document.write(today);
//--></script> </div>
<div id="navigation">
<div id="search">
<!-- Google CSE Search Box Begins -->
<form action="http://www.google.com/cse" id="searchbox_003119959939038504956:xrke8d9eiyi">
<input type="hidden" name="cx" value="003119959939038504956:xrke8d9eiyi">
<p class="search"><input type="text" name="q" size="25"><input type="submit" name="sa" value="Search"><img
src="images/Search.gif" alt="image of search icon" width="20" height="20"></p>
</form><script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_003119959939038504956%3Axrke8d9eiyi〈=en"></script>
<!-- Google CSE Search Box Ends --></div>
<ol id="menu">
<li><a href="tutorials.htm">tutorials</a></li>
<li><a href="shortcuts.htm">shortcut keys</a></li>
<li><a href="office.htm">about office</a></li>
<li><a href="vassistant.htm">virtual assistant</a></li>
<li><a href="desktop.htm">desktop publishing</a></li>
<li><a href="wordprocessing.htm">word processing</a></li>
<li><a href="spreadsheets.htm">spreadsheets</a></li>
<li><a href="presentationer.htm">presentations</a></li>
<li><a href="webdesign.htm">web design</a></li>
<li><a href="blog.htm">blog articles</a></li>
<li><a href="careers.htm">career links</a></li>
<li><a href="reviews.htm">reviews</a></li>
</ol>
</div>
<div id="centercontent">
</div>
<div id="rightcontent">
CTRL D to Bookmark
</div>
<div id="footer">
</div>
</div>
</body>
</html>
|
this test page you can find (after a few minutes) on www.bytesizeoffice.co.uk/test.htm and the CSS www.bytesizeoffice.co.uk/stylessheet_copy(1).css
I did try and fix it, but it just made a large gap in Firefox,after the header, for the search, date and box, which is not acceptable. [/url] |
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Fri Feb 08, 2008 1:30 pm re |
|
|
|
| I am still battling with this. I validated the css and html and added a couple of hacks, hoping it would work but it still does not lay right in IE. Can anyone help me? |
|
madprof
Joined: 26 Jan 2008
Posts: 98
|
| Posted: Fri Feb 08, 2008 2:53 pm |
|
|
|
| Can you make it reference the right images so it lays out as it is supposed to? |
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Fri Feb 08, 2008 2:59 pm re |
|
|
|
Hello, thanks for getting back to me. No, I dont know what that means. Referencing? The right image lays right now,though, www.bytesizeoffice.co.uk/test.htm
but the date and search box lays wrong in IE, I am checking the internet but cannot find a fix for it at all. The CSS is a bit different now [url]www.bytesizeoffice.co.uk/stylessheet_copy(1).css[/url]
checking the site in FF it works OK. But I have yet to check it in Safari. I have IE7 and I know IE6 is buggy but I will check that when I go to work. |
|
madprof
Joined: 26 Jan 2008
Posts: 98
|
| Posted: Fri Feb 08, 2008 3:02 pm |
|
|
|
| OK the images are broken for me - the top banner won't display and the search icon won't display either. Without these it is hard to say how bunched up it is looking at the top, sorry. |
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Fri Feb 08, 2008 3:49 pm re |
|
|
|
| I checked the link I put here and it was not loaded, ie the pictures, I have now loaded them so you can see what is going wrong, thing is my site is now totally wrong but I dont know how to get it offline. |
|
madprof
Joined: 26 Jan 2008
Posts: 98
|
| Posted: Fri Feb 08, 2008 4:02 pm |
|
|
|
OK I made the height of the #header div 130px instead of 90px and that seemed to do something.
Remember that floated elements do NOT make their parent container higher.
Image you have a div with an image and some text in it. The image is floated left so it sits next to the text and is 1000 pixels high. The text is only 50px high. The div is only as high as the text makes it, the image doesn't expand the height at all.
That, I think, was your problem with your header.
Specifying the #header to have enough height to push the rest of the content down seems to do the trick.
Taking things offline ought to be easy enough - just delete them? |
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Fri Feb 08, 2008 4:59 pm re |
|
|
|
| thanks so much for getting back to me, it was driving me nuts, now you say it, its obvious that the header would not expand to fit the nav div. So I will correct that and hopefully that will do it. Yes I think I will delete everything on my server and reload, they cannot get the changes in the images right at all. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
