Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

linking stylesheet for IE 8 1

Status
Not open for further replies.
jlockley

jlockley

Technical User
Nov 28, 2001
1,522
US
While is taking shape in Firefox, it's pretty messed up in IE8. Attaching a seperate style sheet doesn't seem to be functioning. Could you please take a look?
If I can make this work, I can adjust the margins to make sense.

I also need to do something about the globe, which won't show in IE6. I guess I could make it a background in a separate div for both, but is there a way to use a smaller version in IE? (I have IE8. I dread to think what is happening in earlier versions, but I will get to that when I've got this one fixed.)

Htms/css follows in first comment.
thank you
 
Sort by date Sort by votes
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Green Restaurant Strategies </title>
<link rel="stylesheet" type="text/css" href="grs.css" />
<!--[if IE}>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
</head>

<body>

<div id="wrapper">
<div id="header">
<img src="images/header.png" width="900" height="92" alt="Green Restaurant Strategies. A hospitality sustainability consultancy" />
</div>
<div id="links">
<ul class="nav">
<li><a href="WhyBeGreen.htm">Why Be Green</a></li>
<li> <a href="services.htm">Services</a> </li>
<li><a href="about.htm">About</a></li>
<li> <a href="contact.htm">Contact</a> </li>

<li> <a href="contact.htm">Blog</a> </li>
</ul>
</div>
<div id="content">
<p class="top"> 85% of the public either think "green" or are "true green" </p>
<p class="top2"> .....Do you want them as your customers?</p>

<div id="centerbox">

<img class="globus" src="images/globus1.jpg" width="363em" height="451em" alt="green globe with leaves" />
<p class="two">
Responsible practices must benefit your business as well as the environment:<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Strategic Green restaurant planning must:</p>


<ul class="super">
<li>Attract customers</li>
<li>Contain waste management costs</li>
<li>Provide short and long term energy savings..
</li>
<li>Predict and meet current and future standards of compliance.</li>
<li>Provide an agreeable environment for owners and employees.
</li>
<li>Make use of the latest ecologically sound design elements <br />
to create an inviting ambiance.</li>
<li>Avoid "flash-in-the-pan" components and fad solutions with durable, <br />
long lasting components.</li>
</ul>
<br /><br />
<div id="bottom">

Green Restaurant Strategies pilots new and existing businesses through the labyrinth of sustainability practices and standards. <br />
We help you develop, select and implement sensible practices which will serve your business for the long term.
<br />
We work with you to separate the merely trendy from the truly economical, responsible and effective.
</div>
</div>
<div id="sidebar">
<div id="boxone">
<p class="five">
Eating is a political act"<br /><br />Alice Waters<br />

</p>
</div>
<div id="boxtwo">
<p class="five">
"Each of us, as members of the world's business community, will have few opportunities in our lifetime to make a decision as profound, far reaching and fundamentally important as the one make in deciding to take our business down the path of sustainability"
<br /><br />
Daniel Sitarz,<br />
Green Your Business</p>
</div>
</div>
</div>
<div id="footer">

<img src="images/footer.png" width="900" height="55" alt="footer" /></div>

</body>
</html>
Click to expand...

grs.css(works for Firefox)
BODY {

background-image: url(images/bkgd.jpg);
background-repeat: repeat-y;
background-color : #FAFFF1;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0;

padding:0;
}


#wrapper {
height: auto;
width: auto;
margin-right: auto;
margin-left: auto;
border-top: .01em hidden;
}

#header {

top:auto;
width:98%;
height:auto;
z-index:1;
margin-left: auto;
margin-right: auto;
}
#links
{
text-align: center;
margin-top: 2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-weight: 600;
border-bottom: 1px hidden;

}
#content
{
position: relative;
top: 1em;
clear:both;
border: .2em hidden;
height: 64em;


}

#centerbox
{
float: left;
width: 70%;
border: 1em hidden;
font-size: 1em;
color:#4f482b;
font-family: corbel, tahoma, ariel, sans-serif;
overflow: hidden;
clear: both;
}
img.globus
{
position: absolute;
left: 3;
top: 10em;
z-index: -1;
}

#sidebar
{
width: 25%;
height: 95%;
border-bottom: .05em hidden;
border-top: .05em hidden;
float: right;

}
#bottom
{float: left;
clear: both;
max-width: 85%;
margin-left: 5em;
margin-top: 16em;
font-size: 1.4em;
font-weight: 600;
}
#footer {
position: absolute;
top: 58em;
width:auto;
height: 20px;
z-index:6;
clear: both;
border-top-width: medium;
border-top-style: none;
border-top-color: #024A1A;
}



ul.nav
{

list-style-type: none;
text-align: center;
margin: 0; padding: 0;
border-style: hidden;
font-weight: 700;
}
ul.nav li
{
float: left;
display: inline;
}
ul.nav a {
width: 10em;
display: block;
border: .5em hidden;
border-bottom: .5em hidden;
text-decoration: underline;
color: #997711;
}
ul.nav a:visited {
color: #004444;
}
ul.nav a:link {
color: #333333;
}
ul.nav a:hover {
color: #009900;
}

ul.super
{position: absolute;
left: 12em;
top: 7em;
font-size: 1.4em;
}
p.one
{
position: relative;
top: 22em;
left: 4em;
max-width: 60%
border-left: 1.1em hidden;
padding-left: 0;
font-weight:550;
font-size: 1.4em;

}
p.two
{
position: absolute;
max-width: 65%;
left: 4em;
top: 3em;
font-size: 1.5em;
font-weight: 600;

}
p.top
{
margin-top: 5em;
margin-left: 4px;
border-top: .5em hidden;
color: #004400;
padding-left: 9em;
font-size:1.4em;
font-weight: 650;

}
p.top2
{
margin-top: -.5em;
padding-right: 0;
padding-left: 15em;
font-size: 1.4em;
color: #004400;
font-weight: 650;
}
#boxone
{
float: left;
margin-top: -5em;
left: 0;
top: 1em;
clear: both;
width: 55%;
font-style: oblique;
font-weight: 500;
font-size: 1em;
margin-right: 9em;
border: outset .8em #638B2A;
}
#boxtwo
{
float: left;
clear: both;
width: 55%;
font-style: oblique;
font-weight: 500;
font-size: 1em;
margin-right: 9em;
margin-top: 3em;
border: outset .8em #638B2A;
}
p.five
{
padding: .2em;
width: 90%;

}
Click to expand...

ie.css [linked with ie condition - doesn't work)
The sheet is currently identical to the grs.css, with the changes only to the top margins of p.one, #content and p.top to pull them up towards the #links.
BODY {

background-image: url(images/bkgd.jpg);
background-repeat: repeat-y;
background-color : #FAFFF1;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0;

padding:0;
}


#wrapper {
height: auto;
width: auto;
margin-right: auto;
margin-left: auto;
border-top: .01em hidden;
}

#header {

top:auto;
width:98%;
height:auto;
z-index:1;
margin-left: auto;
margin-right: auto;
}
#links
{
text-align: center;
margin-top: 2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-weight: 600;
border-bottom: 1px hidden;

}
#content
{
position: relative;
margin-top: 1em;
clear:both;
border: .2em hidden;
height: 64em;


}

#centerbox
{
float: left;
width: 70%;
border: 1em hidden;
font-size: 1em;
color:#4f482b;
font-family: corbel, tahoma, ariel, sans-serif;
overflow: hidden;
clear: both;
}
img.globus
{
position: absolute;
left: 0;
top: 10em;
z-index: -1;
}

#sidebar
{
width: 25%;
height: 95%;
border-bottom: .05em hidden;
border-top: .05em hidden;
float: right;

}
#bottom
{float: left;
clear: both;
max-width: 85%;
margin-left: 5em;
margin-top: 16em;
font-size: 1.4em;
font-weight: 600;
}
#footer {
position: absolute;
top: 58em;
width:auto;
height: 20px;
z-index:6;
clear: both;
border-top-width: medium;
border-top-style: none;
border-top-color: #024A1A;
}



ul.nav
{

list-style-type: none;
text-align: center;
margin: 0; padding: 0;
border-style: hidden;
font-weight: 700;
}
ul.nav li
{
float: left;
display: inline;
}
ul.nav a {
width: 10em;
display: block;
border: .5em hidden;
border-bottom: .5em hidden;
text-decoration: underline;
color: #997711;
}
ul.nav a:visited {
color: #004444;
}
ul.nav a:link {
color: #333333;
}
ul.nav a:hover {
color: #009900;
}

ul.super
{position: absolute;
left: 12em;
top: 9em;
font-size: 1.4em;
max-width: 60%;
}
p.one
{
position: relative;
top: 5em;
left: 4em;
max-width: 60%
border-left: 1.1em hidden;
padding-left: 0;
font-weight:550;
font-size: 1.4em;

}
p.two
{
position: absolute;
max-width: 65%;
left: 4em;
top: 3em;
font-size: 1.5em;
font-weight: 600;

}
p.top
{
margin-top: 0;
margin-left: 4px;
border-top: .5em hidden;
color: #004400;
padding-left: 9em;
font-size:1.4em;
font-weight: 650;

}
p.top2
{
margin-top: -.5em;
padding-right: 0;
padding-left: 15em;
font-size: 1.4em;
color: #004400;
font-weight: 650;
}
#boxone
{
float: left;
margin-top: -5em;
left: 0;
top: 1em;
clear: both;
width: 55%;
font-style: oblique;
font-weight: 500;
font-size: 1em;
margin-right: 9em;
border: outset .8em #638B2A;
}
#boxtwo
{
float: left;
clear: both;
width: 55%;
font-style: oblique;
font-weight: 500;
font-size: 1em;
margin-right: 9em;
margin-top: 3em;
border: outset .8em #638B2A;
}
p.five
{
padding: .2em;
width: 90%;

}
Click to expand...
 
Upvote 0 Downvote
Oh, for the love of Pete. It's not the first time that's happened.
 
Upvote 0 Downvote
Thank you very much. It works. Have you any suggestions regarding the image? I believe it's correctly represented in the FF rendering, but it inflates in IE. Is it possible to load the images directly in the style sheets rather in HTML, so that a smaller one could be substituted for IE?
 
Upvote 0 Downvote
actually the green globe with leaves doesnt show up in IE 8 for me.

also your text are overlapping on both FF and IE.

might i suggest a simpler way of you laying out your page. For the most part you are working a simple 2 column layout.

I would suggest NOT making the site fluid to 100% and instead go fixed width dimensions (about 1000px is good).

Under your header div create a container div of said 1000px and in that container div set your 2 colums. Float them left and voila.

you might have done this already but its hard to discern from all the code as its a bit sloppy. I think 5 divs should give you your layout.

header
content wrapper
left content
right content
footer

Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Upvote 0 Downvote
actually the green globe with leaves doesnt show up in IE 8 for me.
Click to expand...
I get a broken image. The box is visible and runs under the text.

also your text are overlapping on both FF and IE.
Click to expand...
I was afraid that could happen and was about to ask if there is a way to get it to break at the edge of the container. Max-width is set in %'s, and I had hoped that would work in making it scalable.

I would suggest NOT making the site fluid to 100% and instead go fixed width dimensions (about 1000px is good).
Click to expand...
I'll try that. The additions each happened to keep the various elements from riding up or keep the footer down. If the simpler format works,so much the better.

Float them left and voila.
Click to expand...
so...nothing floated right?
That means margin on right hand column to clear the left?

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
178
Alt255
Alt255
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
632
3esolar
3
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
146
pendle666
pendle666
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
152
lucasbrown
lucasbrown
BobMCT
  • Locked
  • Question
Suggestions on display retrieved date time for editing?
Replies
2
Views
118
BobMCT
BobMCT

Part and Inventory Search

Sponsor

Back
Top