Hey all, I'm an absolute noob when it comes to CSS, just working on my first site with it. Can somebody have a look at my site here (<!-- m --><a class="postlink" href="http://www.ambianceweddingdesign.com">http://www.ambianceweddingdesign.com</a><!-- m -->) and then addon "/redonesite/index2.asp" (not sure why you can't go directly there as you'll get a connection error, but I'll deal with that later) and tell my why I have a yellow strip at the bottom of the footer. I know why it's yellow, as that's what I've set the color in the footer, but it should be completely covered anyhow.
Thanks in advance!!You only get that in M$ Explorer and you gave the #footer a background of yellow hence the yellow showed through.Like I said, I realize why it's yellow, as I've set that just to test when the background get covered, but I've also taken a look at it in Netscape 7 and it's absolutely terrible looking... I think I may have to drop CSS for now as it's apparently more than I can chew... but if anyone has some insight, please let me know!The best advice you'll ever get:
1) Download the latest stable release of Mozilla, Firefox, and Opera.
2) Design your site to look good in these browsers, as they are standards compliant.
3) Hack the style sheets to work in Internet Explorer, which has too many CSS bugs to list here. But it is possible.
<!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3.org/">http://www.w3.org/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->
4) Forget about 4.0 and older browsers. Use @import to import advanced CSS files and keep the <link> imported and internal CSS to CSS 1.0, and very little at that.
USE SEMANTIC MARKUP - Mark up your pages, not according to how the HTML makes the page look, but by what the tags mean.
<!-- m --><a class="postlink" href="http://www.mozilla.org/">http://www.mozilla.org/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.opera.com/First">http://www.opera.com/First</a><!-- m -->, as soon as I see a style sheet that big and complex for a design that's obviously as simple as yours the alarm bells and flashing red lights are overwhelming.
Second, use a complete doctype to make sure browsers are running in full compliance mode, which will tend to minimize inter-browser differences.
Third, you need to rework your font-family settings in descending priority for your design, ending with an appropriate generic family like serif, sans-serif, etc. The one that really stuck out had arial,verdana in it. No one is going to have verdana that doesn't already have arial because it's an add-on. The most logical sequence would be verdana,arial,sans-serif.
Moreover, you need to ditch the font tags and use decent mark up in the first place. Big example, your page heading "Ambiance Wedding Design" should be an h1.
<h1 class="title">Ambiance Wedding Design</h1>
<h2 class="sub_title">Creating a Dream Through Decoration</h2>
Finally, don't just stick raw text into divs. Put it in appropriate wrappers liks <p></p>.Thank you all for your help... I think I've cleaned it up and taken most of your advice in replacing my tags... I'm still having problems with my footer. Can someone have a look at it and let me know what I'm doing wrong... Viewing this site in Opera, I just want the footer to be the text on top of the maroon-black background, minus the orange that you can see. The orange is due to the colour I've set, I realize that, but I want it to be totally covered anyways.
Thanks again!
Edit: I'm also having a problem in IE with my content/container div being as it appears about 2px too wide and looking overstretched.
Also, if you view this in Netscape 7, it's completely screwed, like it isn't even reading my style sheet.
Please keep in mind, my target audience will be primarily Netscape and IEAlso, if you view this in Netscape 7, it's completely screwed, like it isn't even reading my style sheet.
Please keep in mind, my target audience will be primarily Netscape and IE
You really need to stop using IE during your development cycle and use Mozilla Firefox as your primary test browser. Once it works right there THEN look at it in IE.I'll Download Firefox now, but as I stated, I'm still having troubles viewing with Opera as well. And even if it works in Opera/Mozilla... I still need to get it working in IE and Netscape as those are the most common browsers (especially among non-developers), would you not agree?Sure; especially considering Firefox==Mozilla==Netscape. But get it working in a browser that handles most of the standards properly then tweak what you have to to make it work in IE.
You still have problem #1. You MUST have a doctype that puts the browsers into standards compliance mode. Copy/paste this one.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">I've added that Doctype to my page, and it's still messed up. I've cleaned up my CSS to the point where I just can't seem to figure what could be causing the issues I'm having. I'm guessing it's something little... can someone please shed some more light on me!!
I appreciate the help sooo much, and I'm sorry for being such a trouble, but I'm absolutely stumped on this.
Edit: Here's a screenshot of what I'm trying to accomplish (I made this using the dreaded tables!!)
<!-- m --><a class="postlink" href="http://www.ambianceweddingdesign.com/images/ss.jpgFixed">http://www.ambianceweddingdesign.com/images/ss.jpgFixed</a><!-- m --> it.
It was a piece of cake. Take out the color orange in the background: declaration. I also fixed the CSS to have the page display like you want it to according to the screen shot.
You'll need some voice-family hacks to get the main menu to be the correct width in IE5.x/PC.
Read up on the CSS Box Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions">http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions</a><!-- m -->)Greg beat me but since I put the time in on it here's where I was. Note that I needed hardly any of your ids and classes except where there were tag clashes.
Note also I started from scratch displaying your page with the munged stylesheet references and built what I have in the Firefox CSS editor. VERY nice extension.
html {background: #ebb;}
body {
width:90%;
margin: 0 auto;
text-align: center;
background:#966;
min-height: 500px;
}
h1, h2 {
font-family: "monotype corsiva";
font-weight:normal;
}
h1 {
font-size: 2em;
color:#ebb;
margin:0;
}
h1.title { display:none; }
h2 {
font-size: 1.25em;
color:#fdd;
margin:0;
}
#nav ul {
margin:0; padding:0;
list-style:none;
clear:both;
}
#nav li {
display:inline;
font-family: verdana, arial;
font-size: .55em;
font-weight: bold;
}
a { text-decoration: none; }
#nav a {
display: block;
float:left;
width:12.1%;
height:15px;
background:#b66;
border: 1px solid #944;
text-align: center;
color:#000;
}
#content {
border: 1px solid yellow;
margin: 25px 0 5px
}
#footer {
background:#b66;
font-family: verdana, arial;
font-size: .8em;
}
#footer p { margin:0; }
#footer a {
color: #800;
font-size: .7em;
font-weight:bold;
}Here Stopper, I will leave you to sort the colours of the images and things out.
You gotta be careful on smaller screens though and are limited to adding anymore links to the top.
If you find you need to add another image or something just change the padding of the links from 15.9% to somthing smaller.
<!-- m --><a class="postlink" href="http://80.4.61.47/ambience/">http://80.4.61.47/ambience/</a><!-- m -->
Thanks in advance!!You only get that in M$ Explorer and you gave the #footer a background of yellow hence the yellow showed through.Like I said, I realize why it's yellow, as I've set that just to test when the background get covered, but I've also taken a look at it in Netscape 7 and it's absolutely terrible looking... I think I may have to drop CSS for now as it's apparently more than I can chew... but if anyone has some insight, please let me know!The best advice you'll ever get:
1) Download the latest stable release of Mozilla, Firefox, and Opera.
2) Design your site to look good in these browsers, as they are standards compliant.
3) Hack the style sheets to work in Internet Explorer, which has too many CSS bugs to list here. But it is possible.
<!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3.org/">http://www.w3.org/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->
4) Forget about 4.0 and older browsers. Use @import to import advanced CSS files and keep the <link> imported and internal CSS to CSS 1.0, and very little at that.
USE SEMANTIC MARKUP - Mark up your pages, not according to how the HTML makes the page look, but by what the tags mean.
<!-- m --><a class="postlink" href="http://www.mozilla.org/">http://www.mozilla.org/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.opera.com/First">http://www.opera.com/First</a><!-- m -->, as soon as I see a style sheet that big and complex for a design that's obviously as simple as yours the alarm bells and flashing red lights are overwhelming.
Second, use a complete doctype to make sure browsers are running in full compliance mode, which will tend to minimize inter-browser differences.
Third, you need to rework your font-family settings in descending priority for your design, ending with an appropriate generic family like serif, sans-serif, etc. The one that really stuck out had arial,verdana in it. No one is going to have verdana that doesn't already have arial because it's an add-on. The most logical sequence would be verdana,arial,sans-serif.
Moreover, you need to ditch the font tags and use decent mark up in the first place. Big example, your page heading "Ambiance Wedding Design" should be an h1.
<h1 class="title">Ambiance Wedding Design</h1>
<h2 class="sub_title">Creating a Dream Through Decoration</h2>
Finally, don't just stick raw text into divs. Put it in appropriate wrappers liks <p></p>.Thank you all for your help... I think I've cleaned it up and taken most of your advice in replacing my tags... I'm still having problems with my footer. Can someone have a look at it and let me know what I'm doing wrong... Viewing this site in Opera, I just want the footer to be the text on top of the maroon-black background, minus the orange that you can see. The orange is due to the colour I've set, I realize that, but I want it to be totally covered anyways.
Thanks again!
Edit: I'm also having a problem in IE with my content/container div being as it appears about 2px too wide and looking overstretched.
Also, if you view this in Netscape 7, it's completely screwed, like it isn't even reading my style sheet.
Please keep in mind, my target audience will be primarily Netscape and IEAlso, if you view this in Netscape 7, it's completely screwed, like it isn't even reading my style sheet.
Please keep in mind, my target audience will be primarily Netscape and IE
You really need to stop using IE during your development cycle and use Mozilla Firefox as your primary test browser. Once it works right there THEN look at it in IE.I'll Download Firefox now, but as I stated, I'm still having troubles viewing with Opera as well. And even if it works in Opera/Mozilla... I still need to get it working in IE and Netscape as those are the most common browsers (especially among non-developers), would you not agree?Sure; especially considering Firefox==Mozilla==Netscape. But get it working in a browser that handles most of the standards properly then tweak what you have to to make it work in IE.
You still have problem #1. You MUST have a doctype that puts the browsers into standards compliance mode. Copy/paste this one.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">I've added that Doctype to my page, and it's still messed up. I've cleaned up my CSS to the point where I just can't seem to figure what could be causing the issues I'm having. I'm guessing it's something little... can someone please shed some more light on me!!
I appreciate the help sooo much, and I'm sorry for being such a trouble, but I'm absolutely stumped on this.
Edit: Here's a screenshot of what I'm trying to accomplish (I made this using the dreaded tables!!)
<!-- m --><a class="postlink" href="http://www.ambianceweddingdesign.com/images/ss.jpgFixed">http://www.ambianceweddingdesign.com/images/ss.jpgFixed</a><!-- m --> it.
It was a piece of cake. Take out the color orange in the background: declaration. I also fixed the CSS to have the page display like you want it to according to the screen shot.You'll need some voice-family hacks to get the main menu to be the correct width in IE5.x/PC.
Read up on the CSS Box Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions">http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions</a><!-- m -->)Greg beat me but since I put the time in on it here's where I was. Note that I needed hardly any of your ids and classes except where there were tag clashes.
Note also I started from scratch displaying your page with the munged stylesheet references and built what I have in the Firefox CSS editor. VERY nice extension.
html {background: #ebb;}
body {
width:90%;
margin: 0 auto;
text-align: center;
background:#966;
min-height: 500px;
}
h1, h2 {
font-family: "monotype corsiva";
font-weight:normal;
}
h1 {
font-size: 2em;
color:#ebb;
margin:0;
}
h1.title { display:none; }
h2 {
font-size: 1.25em;
color:#fdd;
margin:0;
}
#nav ul {
margin:0; padding:0;
list-style:none;
clear:both;
}
#nav li {
display:inline;
font-family: verdana, arial;
font-size: .55em;
font-weight: bold;
}
a { text-decoration: none; }
#nav a {
display: block;
float:left;
width:12.1%;
height:15px;
background:#b66;
border: 1px solid #944;
text-align: center;
color:#000;
}
#content {
border: 1px solid yellow;
margin: 25px 0 5px
}
#footer {
background:#b66;
font-family: verdana, arial;
font-size: .8em;
}
#footer p { margin:0; }
#footer a {
color: #800;
font-size: .7em;
font-weight:bold;
}Here Stopper, I will leave you to sort the colours of the images and things out.
You gotta be careful on smaller screens though and are limited to adding anymore links to the top.
If you find you need to add another image or something just change the padding of the links from 15.9% to somthing smaller.
<!-- m --><a class="postlink" href="http://80.4.61.47/ambience/">http://80.4.61.47/ambience/</a><!-- m -->