Can someone go to http://home.grandecom.net/~leedowney/ and tell me why it looks perfect in IE Explorer and completely jacked up in Safari and Firefox.
I'm starting out in web design and any help would be greatly appreciated.
Thanks
Help with Website layout, IE...
Lee Downey
Registered User
22 posts
BillR
Ambassador
3,144 posts
ldowney,
Look at this code:
<div id="header">
<img class="logo" src="images\pgcsa_logo.gif" alt="PGCSA Logo" /><br /><br />
<img src="images\pgcsa.gif" alt="Planned Giving Council of San Antonio" />
</div>
That should be changed to look like this:
<div id="header">
<img class="logo" src="images/pgcsa_logo.gif" alt="PGCSA Logo" /><br /><br />
<img src="images/pgcsa.gif" alt="Planned Giving Council of San Antonio" />
</div>
Notice the image names now have / instead of \. The back-slash (\) is used in DOS addresses, and the forward-slash (/) is used in web addresses.
This may explain why Firefox does not display the images.
Tidy tells me that there are 8 instances of back-slash in your code. Fix that and then see how things look.
Let us know if that fixes everything, or if there are still problems.
Look at this code:
<div id="header">
<img class="logo" src="images\pgcsa_logo.gif" alt="PGCSA Logo" /><br /><br />
<img src="images\pgcsa.gif" alt="Planned Giving Council of San Antonio" />
</div>
That should be changed to look like this:
<div id="header">
<img class="logo" src="images/pgcsa_logo.gif" alt="PGCSA Logo" /><br /><br />
<img src="images/pgcsa.gif" alt="Planned Giving Council of San Antonio" />
</div>
Notice the image names now have / instead of \. The back-slash (\) is used in DOS addresses, and the forward-slash (/) is used in web addresses.
This may explain why Firefox does not display the images.
Tidy tells me that there are 8 instances of back-slash in your code. Fix that and then see how things look.
Let us know if that fixes everything, or if there are still problems.
Lee Downey
Registered User
22 posts
Well what a noob mistake!
Anyway, that did fix part of it.
But the main issue is for some reason Firefox and Safari are not showing my DIV "main" correctly (at least according to IE Explorer). The DIV "main" is too far left and under the DIV "mainmenu" (again...it shows correctly in Explorer).
Also, there are boxes around the links in my menu, maybe because of the "hover" attribute used?
I don't understand why the DIV's "mainmenu" and "header" line up, but "main" is all escew.
Don't understand the boxes around the menu links unless it has something to do with "hover".
Thanks!
Anyway, that did fix part of it.
But the main issue is for some reason Firefox and Safari are not showing my DIV "main" correctly (at least according to IE Explorer). The DIV "main" is too far left and under the DIV "mainmenu" (again...it shows correctly in Explorer).
Also, there are boxes around the links in my menu, maybe because of the "hover" attribute used?
I don't understand why the DIV's "mainmenu" and "header" line up, but "main" is all escew.
Don't understand the boxes around the menu links unless it has something to do with "hover".
Thanks!
Cary
Ambassador
1,075 posts
Even when the html is validating you should also check that the CSS validates with http://jigsaw.w3.org/css-validator/
Fixing the errors goes a long way toward getting Firefox to display things the way you intended.
Some of your styles such as line-spacing don't really exist so they weren't doing anything. Two or three rules had extra closing brackets which were doing the most to throw off Firefox. In some cases you had semicolons where you needed colons. Most of the errors were where you used color names other than the 16 official CSS color names.
a.mainmenu's outline styling was producing the outlines in Firefox.
Here's the css with fixes and color names converted to hex where needed:
Fixing the errors goes a long way toward getting Firefox to display things the way you intended.
Some of your styles such as line-spacing don't really exist so they weren't doing anything. Two or three rules had extra closing brackets which were doing the most to throw off Firefox. In some cases you had semicolons where you needed colons. Most of the errors were where you used color names other than the 16 official CSS color names.
a.mainmenu's outline styling was producing the outlines in Firefox.
Here's the css with fixes and color names converted to hex where needed:
body
{
background-color: white;
}
#header
{
position:absolute;
background: #00008b;
top: 10px;
height: 150px;
width: 1024px;
voice-family: "\"}\"";
voice-family:inherit;
width: 1024px;
}
html>body #header
{
width: 1024px;
}
#mainmenu
{
position: absolute;
margin: 140px 0px 0px 0px;
padding: 10px;
background: #00008b;
width: 220px;
height: 2000px;
voice-family: "\"}\"";
voice-family:inherit;
width: 220px;
}
html>body #mainmenu
{
width: 220px;
}
#main
{
position:absolute;
background: white;
margin: 144px 0px 0px 240px;
padding: 0 0 1em 0;
width: 785px;
voice-family: "\"}\"";
voice-family:inherit;
width: 785px;
}
html>body #main
{
width: 785px;
}
img.curve
{
float: left;
clear: left;
margin: 0 1em 0 0;
}
img.logo
{
float: left;
padding: 10px;
}
img.valid
{
text-align: center;
border: 0px;
padding: 5px;
}
img.heading
{
text-align: center;
padding: 5px;
}
a.content
{
text-decoration: none;
font-weight: bold;
color: #483d8b;
outline: none;
}
a.content:visited
{
color: #ff4500;
}
a.content:active
{
color: #6495ed;
}
a.content:hover
{
color: blue;
text-decoration: underline;
}
p.contact
{
font-family: arial;
font-size: 16px;
padding: 0 0 0 10em;
}
h1.header
{
background: #87cefa;
color: #00008b;
font-family: cooper-black;
font-size: 24px;
text-align: left;
margin-top:0; /* added to fix gap above text */
}
h3.date
{
font-family: "Times New Roman";
color: #00bfff;
font-size: 20px;
padding: 0 0 0 3em;
}
h4.event
{
font-family: arial;
font-weight: bold;
font-size: 14px;
padding: 0 0 0 4em;
}
h4.subject
{
font-family: arial;
font-weight: bold;
font-size: 12px;
padding: 0 0 0 5em;
}
h5.speaker
{
font-family: arial;
font-size: 12px;
font-weight: 100;
padding: 0 0 0 6em;
}
a.mainmenu
{
display: block;
font-family: arial;
font-variant: small-caps;
font-size: 14px;
text-align: left;
letter-spacing: .25em;
text-decoration: none;
color: white;
}
a.mainmenu:active
{
text-decoration: underline;
}
a.mainmenu:hover
{
background-color: white;
color: #008b8b;
}
a.sidemenu
{
display: block;
font-family: arial;
font-variant: small-caps;
font-size: 12px;
font-style: italic;
text-align: right;
letter-spacing: .25em;
text-decoration: none;
color: white;
}
a.sidemenu:hover
{
background-color: white;
color: #4169e1;
}
{
background-color: white;
}
#header
{
position:absolute;
background: #00008b;
top: 10px;
height: 150px;
width: 1024px;
voice-family: "\"}\"";
voice-family:inherit;
width: 1024px;
}
html>body #header
{
width: 1024px;
}
#mainmenu
{
position: absolute;
margin: 140px 0px 0px 0px;
padding: 10px;
background: #00008b;
width: 220px;
height: 2000px;
voice-family: "\"}\"";
voice-family:inherit;
width: 220px;
}
html>body #mainmenu
{
width: 220px;
}
#main
{
position:absolute;
background: white;
margin: 144px 0px 0px 240px;
padding: 0 0 1em 0;
width: 785px;
voice-family: "\"}\"";
voice-family:inherit;
width: 785px;
}
html>body #main
{
width: 785px;
}
img.curve
{
float: left;
clear: left;
margin: 0 1em 0 0;
}
img.logo
{
float: left;
padding: 10px;
}
img.valid
{
text-align: center;
border: 0px;
padding: 5px;
}
img.heading
{
text-align: center;
padding: 5px;
}
a.content
{
text-decoration: none;
font-weight: bold;
color: #483d8b;
outline: none;
}
a.content:visited
{
color: #ff4500;
}
a.content:active
{
color: #6495ed;
}
a.content:hover
{
color: blue;
text-decoration: underline;
}
p.contact
{
font-family: arial;
font-size: 16px;
padding: 0 0 0 10em;
}
h1.header
{
background: #87cefa;
color: #00008b;
font-family: cooper-black;
font-size: 24px;
text-align: left;
margin-top:0; /* added to fix gap above text */
}
h3.date
{
font-family: "Times New Roman";
color: #00bfff;
font-size: 20px;
padding: 0 0 0 3em;
}
h4.event
{
font-family: arial;
font-weight: bold;
font-size: 14px;
padding: 0 0 0 4em;
}
h4.subject
{
font-family: arial;
font-weight: bold;
font-size: 12px;
padding: 0 0 0 5em;
}
h5.speaker
{
font-family: arial;
font-size: 12px;
font-weight: 100;
padding: 0 0 0 6em;
}
a.mainmenu
{
display: block;
font-family: arial;
font-variant: small-caps;
font-size: 14px;
text-align: left;
letter-spacing: .25em;
text-decoration: none;
color: white;
}
a.mainmenu:active
{
text-decoration: underline;
}
a.mainmenu:hover
{
background-color: white;
color: #008b8b;
}
a.sidemenu
{
display: block;
font-family: arial;
font-variant: small-caps;
font-size: 12px;
font-style: italic;
text-align: right;
letter-spacing: .25em;
text-decoration: none;
color: white;
}
a.sidemenu:hover
{
background-color: white;
color: #4169e1;
}
BillR
Ambassador
3,144 posts
ldowney,
Your style.css has some errors. I noticed that you did not validate your CSS, but your code is validated. If you validate your CSS at http://jigsaw.w3.org/css-validator/ you will find that W3C does not validate colors other than about 16. You can solve that by using the HEX equivalent.
But there are other errors that need to be fixed. Look at
#header
{
position:absolute;
background: darkblue;
top: 10px;
height: 150px;
width: 1024px;
voice-family: "\"}\"";
voice-family:inherit;
width: 1024px;
}
Third line from the bottom should be removed and that line of code is duplicated in other places. That line has } in the setting area which is the END of the styles for that group.
Also note the duplicate width setting. There are several places where you have duplicate width settings. That will not cause a problem until we get to the next step.
Add up the width of your #mainmenu and #mail styles. Be sure to add in all the margins and paddings, and you will see that you are in excess of your 1024px body and that will throw some floats down. I played around with changing the width of #main and I also placed a min-width:1024; in the body style.
Now for the real fun. I like the look of your curves, and combined them into a single graphic. I made that graphic the background for #main and set it to no repeat. Then I played with the margins to get things positioned properly. I noticed that the <h1> was not proper, so I put the curve1.gif inside the <h1>. <h1 class="header"><img src="images/curve1.gif" class="curve" alt="Curve 1" />Programs & Education</h1>
It was a learning experience, and I had fun with it, as well as learning how to combine graphics with GIMP.
Here is a link to what I did: http://www.coffeecuphelp.com/broberson/ldowney/
I haven't really tested it with anything other than Firefox2, but it should work.
Hope this helps.
Your style.css has some errors. I noticed that you did not validate your CSS, but your code is validated. If you validate your CSS at http://jigsaw.w3.org/css-validator/ you will find that W3C does not validate colors other than about 16. You can solve that by using the HEX equivalent.
But there are other errors that need to be fixed. Look at
#header
{
position:absolute;
background: darkblue;
top: 10px;
height: 150px;
width: 1024px;
voice-family: "\"}\"";
voice-family:inherit;
width: 1024px;
}
Third line from the bottom should be removed and that line of code is duplicated in other places. That line has } in the setting area which is the END of the styles for that group.
Also note the duplicate width setting. There are several places where you have duplicate width settings. That will not cause a problem until we get to the next step.
Add up the width of your #mainmenu and #mail styles. Be sure to add in all the margins and paddings, and you will see that you are in excess of your 1024px body and that will throw some floats down. I played around with changing the width of #main and I also placed a min-width:1024; in the body style.
Now for the real fun. I like the look of your curves, and combined them into a single graphic. I made that graphic the background for #main and set it to no repeat. Then I played with the margins to get things positioned properly. I noticed that the <h1> was not proper, so I put the curve1.gif inside the <h1>. <h1 class="header"><img src="images/curve1.gif" class="curve" alt="Curve 1" />Programs & Education</h1>
It was a learning experience, and I had fun with it, as well as learning how to combine graphics with GIMP.
Here is a link to what I did: http://www.coffeecuphelp.com/broberson/ldowney/
I haven't really tested it with anything other than Firefox2, but it should work.
Hope this helps.
Lee Downey
Registered User
22 posts
Thanks for your help everyone. I'll make the changes tonight and report back. I still have a lot to learn and glad there are those around that will help out.
Regarding the multiple width declarations in the DIV listings, I read somewhere that it was a workaround for IE 5 (I think it was) that prematurely closes CSS entries. Is that not correct? My target audience will mostly be on IE6 and above so it doesn't matter. I highly doubt that any will be on Safari or Firefox, but I still wanted to make it cross-browser compliant for experience. The CSS Validator will help for sure! Thanks!
Lee
Regarding the multiple width declarations in the DIV listings, I read somewhere that it was a workaround for IE 5 (I think it was) that prematurely closes CSS entries. Is that not correct? My target audience will mostly be on IE6 and above so it doesn't matter. I highly doubt that any will be on Safari or Firefox, but I still wanted to make it cross-browser compliant for experience. The CSS Validator will help for sure! Thanks!
Lee
BillR
Ambassador
3,144 posts
Lee,
There are some IE5 specific "hacks" for CSS, but I don't know of many folks that are using them. Generally they are for specific problems.
If you want to download any of the stuff I posted, feel free.
As I was looking at what I posted last night, I think I forgot to mention that I eliminated the absolute positioning. I have never had much luck with absolute positioning, and find it easier to position things using floats with div IDs.
There are some IE5 specific "hacks" for CSS, but I don't know of many folks that are using them. Generally they are for specific problems.
If you want to download any of the stuff I posted, feel free.
As I was looking at what I posted last night, I think I forgot to mention that I eliminated the absolute positioning. I have never had much luck with absolute positioning, and find it easier to position things using floats with div IDs.
Lee Downey
Registered User
22 posts
Thanks to everyone for their help. Fixed all my noob and careless errors and now it works in other browsers...go figure. I didn't know about the colors so thanks for that. I'll just stick with the hex numbers.
Also, wanted to point something out:
I wanted to mention that the idea was not mine originally. I got it from MeyerWeb.com...his "curvelicious" design. He has lots of good ideas and designs, so I recommend the website. I'm still learning programming in general, and he has a lot of neat ideas based strictly on what CSS can do.
Lee
Also, wanted to point something out:
billr wrote:
I like the look of your curves, and combined them into a single graphic.
I like the look of your curves, and combined them into a single graphic.
I wanted to mention that the idea was not mine originally. I got it from MeyerWeb.com...his "curvelicious" design. He has lots of good ideas and designs, so I recommend the website. I'm still learning programming in general, and he has a lot of neat ideas based strictly on what CSS can do.
Lee
sasukejjj
Trial User
1 post
Hi,guys
spam advertising removed
spam advertising removed
BillR
Ambassador
3,144 posts
Wenkang,
This is not an advertising forum. The CoffeeCup forums are for learning how to use the CoffeeCup software and build websites.
Your advertising has been removed.
This is not an advertising forum. The CoffeeCup forums are for learning how to use the CoffeeCup software and build websites.
Your advertising has been removed.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
