Hi.

 

I am writing the code for my main personal site, however i made IE mad (i mainly check in firefox) while i am still coding the layout.

 

I believe the problem lies within my external CSS style sheet.

 

something i have done has made nearly everything but the header disappear in IE. I am wondering what would do something like this?

I have validated both the CSS and the index.html in W3C (no problem, both passed.)

 

Wondering if you could let me know what i need to check and what to watch out for which may have cause this.

 

(i will upload the CSS sheet if i have to) gonna try to solve the problem just by tips off

 

Thanks in advance

Ah i worked out the whole layout (apart from the footer and header)

Is hiding to the right.... i have to scoll to see it... now i have to work out what i did to make that happen...

Well i fixed the problem.

 

It does not like me to use position:absolute; on the nav area.... now i cant position the nav bar where i want. (Fixed only works in Firefox) in IE just the nav bar disappears.

 

Think i am going to have a break before pc's go flying.

 

Let me know if you have any ideas... right now i welcome anything... i could just be missing something simple...

Hi Emmi, can you post the css/html?

*shy* i know i shouldn't be.

Anyway i seem to be making it worse. its not been proof read yet / still layout elements to be added / and need a nice tidy

 

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=utf-8" />

<meta name="Keywords" content="Web design, Sheffield, South Yorkshire, Creative" />

<link href="style1.css" rel="stylesheet" type="text/css" />

<title>EmmaCSdesign</title>

</head>

<body>

<div id="wrapper">

<div id="pageheader">

<h1>Web and Creative Design</h1>

</div>

<div id="navigation">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</div>

<!-- end nav div -->

<div id="bodycontent">

<h2> Welcome to my world of design </h2>

<p>Web and Creative Designer. <br />

I believe in creating a special exoerience that suit your needs now and in the future. </p>

<p>I am a person with a vast imagination and a natual flair in design, my aim is to create <br />

your vision.</p>

<p> I am very passionate about what i do, i believe a person never stops learning. I will

welcome your challange.<br />

Please take a look around my site, if you have any quesions or if you just like to

talk to me please email me.</p>

<p> Many thanks for your time. </p>

</div> <!-- end of bodycontent -->

<div id="footer">

Website copyrighted to www.emmacsdeign.co.uk

</div> <!-- end footer div-->

</div> <!-- Wrapper -->

</body>

</html>

 

CSS (so far... been messing up a little to try and fix)

html {

margin: 0;

padding: 0;

}

 

#pageheader{

background: transparent url(header1.png) no-repeat top right;

width: 1280px;

height: 150px;

float: left;

margin-bottom: 20px;

margin-top: 70px;

margin-left: 0%;

}

 

h1{

font-size:12px;

color:#9999FF;

float: right;

}

 

body{

background: transparent url(bg1.png) no-repeat top right;

font-family: Petperua, Georgia, Verdana, Helvetica sans-serif;

color: #353242;

margin-left: 0;

}

 

p {

font-size: small;

font-family: Petperua, Georgia, Verdana, Helvetica sans-serif;

color: #50407F;

}

 

#bodycontent {

padding: 5px;

width: 539px;

height: 600px;

margin-left: 15px;

margin-top: 200px;

}

 

#navigation {

clear: both;

position: fixed;

margin-left: 0;

padding-top: 30px;

padding-bottom: 0;

margin-bottom: 0;

margin-top: 10px;

background: url(navbg1.png) repeat;

height: 30px;

width: 100%;

border: #88557C;

}

 

#navigation ul {

list-style:none;

margin:0;

padding:0;

border: #88557C;

}

 

#navigation li{

display:inline;

}

 

#navigation a:link, #navigation a:visited {

padding:0.4em 4em 0.4em 4em;

color: #99CCFF;

background-image: url("nav1.png");

text-decoration:none;

margin-left:0;

margin-right:0;

}

 

#navigation a:hover{

color: #660099;

background-image: url("nav2.png");

background-repeat:repeat;

}

Hi Emmi,

 

It would be easier for us to see a live example of the code, so we can quickly and easily use our tools to diagnose the "problem". You'll find IE infuriates you the more you have to fix your designs to work in it. Just because it's crap you should still use it (along with a couple of other browsers) to check how the site renders.

 

Just having a quick look at the code, are you sure you need to position the nav that way?

Hello again Emmi.

Just a quick question; do you want the nav to be positioned absolutely?

Hi Emmi,

 

It would be easier for us to see a live example of the code, so we can quickly and easily use our tools to diagnose the "problem". You'll find IE infuriates you the more you have to fix your designs to work in it. Just because it's crap you should still use it (along with a couple of other browsers) to check how the site renders.

 

Just having a quick look at the code, are you sure you need to position the nav that way?

 

Hey.

I still use IE / same as firefox. However while making the changes to the nav (my docs are all set to open in firefox) and i normally check in IE as well.

However (i should know better) the course of the evening i have forgotton IE (till about 20 changes were made) and then i mess the whole thing completely up in IE.

 

Your right about the nav (that seem to be the problem area) what may have been a simple problem i made a lot worse. (lucky i keep a change management doc) so hopefully be able to find my way back.

 

I will try to get online for you guys tomorrow.

 

Thanks so far for feedback

Hello again Emmi.

Just a quick question; do you want the nav to be positioned absolutely?

 

Yes. however that what originally made IE go crazy.

As has already been said, it's difficult to see the problem without a live site.

However, I've noticed that you've set the width of #pageheader to 1280px which will mean horizontal scrolling for a lot of people. Also, you have a #wrapper div but you haven't specified a width for it.

Because you have a fixed height for #pageheader of 150px, you should be able to position the nav directly underneath it.

Set a width for your #wrapper div and then set its position to relative. Then position the #nav absolutely 150px from the top and it will be positioned in relation to the #wrapper div. (Absolutely positioned elements are positioned relative to their first positioned container). That should put it underneath the #pageheader div.

As has already been said, it's difficult to see the problem without a live site.

However, I've noticed that you've set the width of #pageheader to 1280px which will mean horizontal scrolling for a lot of people. Also, you have a #wrapper div but you haven't specified a width for it.

Because you have a fixed height for #pageheader of 150px, you should be able to position the nav directly underneath it.

Set a width for your #wrapper div and then set its position to relative. Then position the #nav absolutely 150px from the top and it will be positioned in relation to the #wrapper div. (Absolutely positioned elements are positioned relative to their first positioned container). That should put it underneath the #pageheader div.

 

I think you hit on of the nails on the head... believe i worked out when/how i may have partly wrong.

I did have #wrapper (it was on the top) however that seem to be missing now.

 

(btw the nav should be on top of the header. a little to the right... )

this is the first time for trying this. I fix it up the best i can tomorrow and put online for your viewing.

 

Thanks again