• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 208
  • Last Modified:

CSS positioning problem and browser compatibility issue (files provided)

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/testing/index2.html

the css is available as a text file here
(the real file has the appropriate .css extension)

www.floridarangers.com/testing/floridarangers.txt

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
0
Roba122
Asked:
Roba122
1 Solution
 
Jason C. LevineNo oneCommented:
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/csslayout-howto
http://glish.com/css/7.asp
http://joshuaink.com/blog/196/a-simple-guide-to-3-column-layouts
http://www.webreference.com/authoring/style/sheets/layout/advanced/

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.
0
 
Roba122Author Commented:
Well this looks good I read most of that(in q2). What I was looking for was the behavior while Im working in Dream weaver.  

Also I validated the page but the errors werent clear to me,( how to fix them)  any help with that?
0
 
Jason C. LevineNo oneCommented:
>> 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.



0
Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

 
Roba122Author Commented:
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

0
 
Jason C. LevineNo oneCommented:
Okay, please repost the HTML and CSS file and let me look at it again.
0
 
Roba122Author Commented:
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
0
 
radnorCommented:
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;
}
0
 
Roba122Author Commented:
Well no,  is there a conflict with that? I pasted the code from a template to get me going on the mundane stuff. and to have something to work back from.  If I dont refer to it does it matter?
0
 
Jason C. LevineNo oneCommented:
It might, but I doubt it.  Change it to be safe.

I have to do some (paying) work today so I will be getting back to you on the CSS in a few hours unless Radnor beats me to it.
0
 
Jason C. LevineNo oneCommented:
Well now the CSS file has links to local images (file:D\\) so there is no way for me to fully preview it.
0
 
pcthelpCommented:
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/articles/css_mastery/

got from amazon http://www.amazon.com/gp/product/1590596145/002-2615236-0834407?v=glance&n=283155

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.

0
 
Roba122Author Commented:
http://www.floridarangers.com/testing/index3.html

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?
0
 
Jason C. LevineNo oneCommented:
Remove the copynote div...nesting the footer and copynote divs is screwing up the design and you don't need to do it this way.
0
 
Roba122Author Commented:
I did it. and it works. I just took and nested the two divs inside another one  now named footer. I just wanted seperate formatting and such and wanted to run a off color line across the top so I put two divs in.  So it works!  Thanks alot

0
 
Jason C. LevineNo oneCommented:
Great.  Good luck with learning CSS.  Over time, you will come to prefer it to tables for complex layouts.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now