Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: Why the gaps??

  1. #1
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts

    Post Why the gaps??

    I have a page which is fully XHTML 1.0 Strict compatible, and on IE it is fine, but on Opera, FF and Netscape 7, it has gaps between some of the divs. instead of posting the code, i'll link to the files:

    index.html
    style.css

    Any help gr8ly apreciated!

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    What gaps? What's the page suppose to look like? Why do you have a "valid XHTML" badge when your page isn't valid XHTML, nor being served as XHTML?

  • #3
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    It is valdi XHTML, atleast according to the validator!

    As for the gaps, sorry for being unclear. There are gray lines across the page in two locations that are not there on IE.

    The first is between the dk blue header image and the rest of the page, but it is sort of covered by the menu.

    The second is between the white content area and the yellow bar at the bottom. That is also not supposed to be there.

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    div img
    {
    display:block;
    }
    The online validator misses the unencoded ampersand near the bottom of your page. You also have
    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    at the top of your page. Also, just a suggestion (I realise you may be new and using a WYSIWYG editor), you should look at restructuring your pages, especially to introduce some semantics. Getting rid of the Javascript navigation menu is also a good idea.

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Sorry it took me SOOO long to get back to you, but thats how life is.

    I'm not new, as far as HTML goes, but I am new to using divs for my layout. I used to use tables, til I found out that was a real no-no.

    Would you mind giving a definition of what "semantics" exactly are? I thought it just meant using divs for your layout.

    thanx 1,000,000

    Dan
    Last edited by whizard; 02-10-2005 at 06:41 PM. Reason: Typo
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #6
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Semantics

    Semantics comes with the complete seperation of the structure & content of your html document from it's appearance.

    It means choosing the right html tag for the right content. The way I work now, and many others too, is to start marking up your content in a very simple way, based on what each snippet of content is. So you use h1 thru h6 for headings <p > for paragraphs etc etc - only then do I start throwing in divs and fiddling with the css to knock the page into some semblance of my photoshp mock up.

    Gary

  • #7
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by whizard
    I thought it just meant using divs for your layout.
    Nope, divs are semantically meaningless, they are just used as hooks for your css.

    Gary

  • #8
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Thanx for the insight! I also found some stuff on W3C that helped, but your idea is great!
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #9
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by whizard
    Thanx for the insight! I also found some stuff on W3C that helped...
    Dan
    Hey, it was their idea in the first place

  • #10
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Whizard
    Would you mind giving a definition of what "semantics" exactly are? I thought it just meant using divs for your layout.
    In these terms, semantics refers to using the html elements to make your mark-up meaningful. So that your top level heading is within <h1></h1> tags, paragraphs in <p></p> tags, etc.

    It helps give context regardless of how you style the elements with your CSS. So no matter how it looks, the underlying structure will be friendly to search engines and non-graphical browsers.

    A basic template might look like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <title>
          Welcome to RAJetter.com
        </title>
      </head>
      <body>
    
       <h1>Page Subject</h1>  
    
       <!-- navigation -->
       <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
       </ul>
    
       <h2>Subject for the following paragraphs</h2>
    
       <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    
       <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
    
       <h3><a href="#">Contact me</a></h3>
    
      <!-- footer -->
      <ul>
        <li><a href="#">Copyright</a></li>
        <li><a href="#">Top</a></li>
      </ul>
    
     </body>
    </html>
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •