I have jut begun to build a new sit e using CSS this is the first time doing so for me. Previously I did everything in tables and I have to say this is a bugger to figure out for the first time. So I have a external style sheet and my main page (right now index2.html)
firstly it is a 3 column layout. Dreaweaver is butchering the layout any time I put any content inside the main sections and if I put anything in the "menu div" text appears OUTSIDE of the conatiner its in when the page is rendered. I dont know how that even works. So the layout is as follows:
A main container "wrapper". This is used to center everything in the page. Inside wrapper is "pghead" (this contains a header image) then below is "nav" which will hold page specific navigation. Then below those are the 3 columns for the layout. First "menu" which will hold global navigation for the site. then "content" which will hold the main content and finally "rtbox" which will hold random news etc.
then a copyright notice "copynote" and a footer "footer" all at the bottom. So the first issue is that the page looks nothing like the rendered page in dream weaver, I can live with that but its making it damn hard to lay this thing out as it keeps moving and never looks the same when rendered.
Next is cross browser compatibiltiy I've got it just about looking right WITHOUT any content inside on explorer 6 but when I render it in Firefox its all off plus one of the photos doesnt load
You can see the page here
www.floridarangers.com/tes
the css is available as a text file here
(the real file has the appropriate .css extension)
www.floridarangers.com/tes
To answer this question:
1. I validated the css and the html, but stuff is still wrong, so tell me If I missed something
2. A short discussion on positioning behavior of Divs in Dreamweaver, any way to approach my layout differently but get the same result?(see the css)
3. Firefox issue whats causing it what do I do to fix it? or is it explorer?
Any other information would be appreciated.
Thank you
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
>> What I was looking for was the behavior while Im working in Dream weaver
Please re-clarify.
>> Also I validated the page but the errors werent clear to me,( how to fix them) any help with that?
Below are the results of checking this document for XML well-formedness and validity.
1. Error Line 12 column 10: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.
<div id = wrapper>
2. Error Line 13 column 9: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.
<div id =pghead></div>
3. Error Line 14 column 10: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.
<div id = nav>
4. Error Line 26 column 11: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.
<div id = menu> </div>
5. Error Line 27 column 10: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.
<div id = content>
6. Error Line 30 column 11: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.
<div id = rtbox>
7. Error Line 34 column 10: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.
<div id = footer> <a href="#">About Us</a> | <a href="#">Site
8. Error Line 37 column 10: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.
<div id = copynote>
Okay, most of this means your <div> tags with ID are not written properly. I think all you need to do is enclose them in quotes:
<div id = "copynote">
Once that is done, you can run the CSS validator and continue from there.
With regards to 1
I mean I am having a hard time with the behavior Im getting when I put text in the first div named "menu"
on the errors:
I validated both the css and the html and they came out ok now. The css had warnings but were all related to such and such having the the same background color etc. Fixed all the HTML
Ok I made some changes both the css and html pass validation. Stupid thing still looks like it was put in a blender with fire fox and looks fine on explorer. Any help with that. I also added an image place holder some text in the different sections and also plaid with the css to get the layou working a little bit better. From my understanding you are not supposed to use absolute postioning if possible but it worked for me when nothing else seemed to.
Thanks
copy of the css is still available at the same location in .txt format
In your style sheet, did you want BOTH a CLASS and an ID called footer??? .02
#footer {
width: 692px;
height: auto;
font-size: 90%;
background-color: #CCCCCC;
padding: 5px;
position: relative;
}
.footer {
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
}
Hi,
Not so much a solution but you may find it useful, but im also trying to change my web development technique like yourself to purely CSS, I recently bought the following book :
http://www.digital-web.com
got from amazon http://www.amazon.com/gp/p
It's been a good read and I've picked up alot of useful info and tips - worth a look and a good reference guide for future projects.
http://www.floridarangers.
I made some changes and did some other work. unfortunately web had been down all morning at work so I couldnt post that I did this. css is at same location floridarangers3.css
I've got it looking pretty much spot on in ie and reaaaaaly close in firefox.....having problems with the stupid footers.. any help with that?
Business Accounts
Answer for Membership
by: jason1178Posted on 2006-05-22 at 11:32:22ID: 16736706
Hi Roba122,
Making the switch from tables to CSS is tough. I sympathize. There are several things going on here, so I'll try to address them in order:
>> 1. I validated the css and the html, but stuff is still wrong, so tell me If I missed something
When I validate the CSS and HTML, it is full of errors. When you declare a DOCTYPE and don't conform to the standards of the declaration, the browsers go into quirks mode and start rendering things in their own special way. In your particular case, IE is being more forgiving of your errors than FireFox is, thus your design looks kind of okay in IE and doesn't render hardly at all in FF.
What you need to do first is resolve this situation. Either get away from using XHTML 1.0 Transitional and go back to HTML 4.0 Transitional or Strict or run this page through the Validators at http://www.w3.org/. Do the HTML first and fix EVERY error that is reported. Keep running the page through the Validator until it comes up with no errors. Then repeat the process with the CSS validator until there are no errors in the CSS file.
At this point, your page may render the same in both browsers and most of your problems are solved. We can then start to address positioning and stupid CSS tricks (TM).
>> 2. A short discussion on positioning behavior of Divs in Dreamweaver, any way to approach my layout differently but get the same result?(see the css)
Well, yes. Lots of ways. First of all, you almost never want to use absolute positioning. For the rest of it, I could type about CSS all day and all night and not come close to teaching you what you need to know. I recommend you do some more reading about CSS layout with the following tutorials:
http://www.w3.org/2002/03/
http://glish.com/css/7.asp
http://joshuaink.com/blog/
http://www.webreference.co
You can also explore how other people approach it:
http://www.oswd.org/
>> 3. Firefox issue whats causing it what do I do to fix it? or is it explorer?
See #1. It's the quirks mode for both browsers and once you get into quirks mode, all bets are off.