Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Junior Member
    Join Date
    Oct 2005
    Posts
    11
    Member #
    11703
    Hi all
    i am currently building my first site (from scratch) in XHTML strict standard, i usually build in HTML 4.01.
    So i have it all working in my editors preview thing, it is validating as strict xhtml my css is valid everything is dandy...
    my problem (besides the fact that IE wont even open the xhtml file from my pc) is that it isnt displaying correctly in firefox (ive had this prob before with my html designs too) i suspect it'll look fine in ie but i cant check that and ff is my problem
    when i float something it still overlaps, i fix it with margins but firefox doesnt line everything up the way the editor preview does (and according to my calculations it should look the way the editor shows me) does ff display margins or padding or something weirdly??? i have it all set to 0 padding and 0 margins except where i need padding and margins.

    Also i have this code here...
    HTML Code:
    <div class="header"><img src="pics/top1.gif" width="759"
    height="55" alt="Emagine UmmHend.com" />
    <img src="pics/top2.gif" width="759"
    height="55" alt="Emagine UmmHend.com" />
    <img src="pics/top3.gif" width="759" height="55" alt="Emagine UmmHend.com" />
    <img src="pics/top4.gif" width="759" height="55" alt="Emagine UmmHend.com" /></div>
    with this css...
    Code:
    div.header{
    width: 780px;
    height: 220px;
    padding: 0;
    margin: 0;}
    margins set to 0 padding to 0 and its meant to display the images in one block but firefox puts spaces between them.
    what am i doing wrong?

    i can paste my entire xhtml and css code for u if it will help? (dont worry it isnt much i just started on this)

    thanks in advance
    :dead:

  2.  

  3. #2
    Member zingmatter's Avatar
    Join Date
    Jun 2005
    Location
    Glasgow
    Posts
    84
    Member #
    10174
    Why not do xhtml transitional ? I tried strict and it was so much hassle for such little benefit (oh no - here comes the storm...) I settled for transitional.

  4. #3
    Junior Member
    Join Date
    Oct 2005
    Posts
    11
    Member #
    11703
    Thanks ill try and see if it helps if not ill just go back to strict and try to work it out fromthere, i wanted to do strict to test my skills and become more confident in solving problems and what not.
    Also i fixed the IE problem i mentioned by saving it as .htm instead of .xhtml (i thought it had to be .xhtml)

  5. #4
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    True, XHTML documents can be saved as .html, I always do.

    In reference to the first question on the first post... YES: All browsers handle certain attributes differently: margin, padding, line-height, etc.

    Where could the problem be...?

    The first thing I would try is very simple, add this to your css:

    Code:
    img{
      padding: 0;
      margin: 0;
      border: none;
    }
    Unsolicited tips:
    - It's always best to code for FF first and then add the hacks to adjust to IE
    - div.header is superfluous. It's sufficient to write .header
    - I have found working with IDs to be a lot easier to organize my sites. #header
    - When writing alt tags, forget about fancy spelling. That works visually, but you want to write alt tags so they SOUND right when read out loud.
    Shani

    I have an eye for detail like you'd never believe.

  6. #5
    Junior Member
    Join Date
    Oct 2005
    Posts
    11
    Member #
    11703
    Thanks for the tips ill try the img css and let you know if that fixes it.

  7. #6
    Junior Member
    Join Date
    Oct 2005
    Posts
    11
    Member #
    11703
    ok i tried that and it didnt fix it... ?

  8. #7
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Quote Originally Posted by DCScene
    - When writing alt tags, forget about fancy spelling. That works visually, but you want to write alt tags so they SOUND right when read out loud.
    *me being a PITA for a minute*
    ALT is not a tag ... it's an attribute
    *Ok ... I'm done *

    Now ummhend give us a link to the site or at least the whole HTML and CSS
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  9. #8
    Junior Member
    Join Date
    Oct 2005
    Posts
    11
    Member #
    11703
    I dont have it online yet so here's the xHTML ...
    Code:
    <?xml version="1.0" encoding="windows-1252"?>
    <!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">
    <!-- Created on: 5/22/2006 -->
    <head>
    <meta http-equiv="Content-Type" content="text/html" />
    <meta name="description" content="Islamic Cartoon Dolls. Thought Bubbles and Poetry. Web Design. Islamic Links. A Muslimas Perspective." />
    <meta name="keywords" content="islam, poetry, blog, cartoon, dolls, blinkies, smilies, allah, muslim, muslima, religion, philosophy, information, links, emagine, web design" />
    <meta name="author" content="E.M. Umm Hend" />
    <meta http-equiv="content-language" content="English" />
    <meta name="rating" content="General" />
    <meta name="robots" content="index,follow" />
    <meta name="revisit-after" content="1 week" />
    <link rel="stylesheet" type="text/css" href="the.css" />
    <title>Emagine. A Muslimas Perspective - UmmHend.com</title>
    </head>
    <body>
    <div id="container">
    <!-- header -->
    <div id="header">
    <div class="heda"><img src="pics/top1.gif" width="759" height="55" alt="Imagine" /></div>
    <div class="heda"><img src="pics/top2.gif" width="759" height="55" alt="Imagine" /></div>
    <div class="heda"><img src="pics/top3.gif" width="759" height="55" alt="Imagine" /></div>
    <div class="heda"><img src="pics/top4.gif" width="759" height="55" alt="Imagine" /></div>
    </div>
    <!-- menu box -->
    <div id="menu">
    <!-- menu box 1 -->
    <div class="mbxt">
    
    </div>
    <div class="mbx">
    
    </div>
    <!-- menu box 2 -->
    <div class="mbxt2">
    
    </div>
    <div class="mbx2">
    
    </div>
    </div>
    <!-- content -->
    <div id="content">
    
    </div>
    </div>
    </body>
    </html>
    and here's the CSS...
    Code:
    body {
    background: url("pics/bg.gif") maroon;
    font-family: arial,serif,sans-serif;  
    color: black;
    font-size: 100%;
    }
    
    img{
      padding: 0;
      margin: 0;
      border: none;}
    
    #container{
    padding: 0;
    margin: 0;}
    
    #header{
    width: 780px;
    height: 220px;
    padding: 0;
    margin: 0;}
    
    #menu{
    width: 163px;
    padding: 0;
    margin: 0;
    float: left;}
    
    .mbxt{
    width: 183px;
    height: 47px;
    padding: 0;
    margin: 0;
    background: url("pics/mbxt.gif") #660066;
    color: #ccccff;}
    
    .mbx{
    width: 183px;
    height: 223px;
    padding: 0;
    margin: 0;
    background: url("pics/mbx.gif") #CCCCFF;
    color: #660066;}
    
    .mbxt2{
    width: 183px;
    height: 45px;
    padding: 0;
    margin: 0;
    background: url("pics/mbxt2.gif") #800080;
    color: #ccccff;}
    
    .mbx2{
    width: 183px;
    height: 224px;
    padding: 0;
    margin: 0;
    background: url("pics/mbx2.gif") #CCCCFF;
    color: #660066;}
    
    #content{
    width: 576px;
    height: 539px;
    padding: 0;
    margin-left: 183px;
    background: url("pics/content.gif") #CCCCFF;
    color: #660000;}
    
    .heda{
    padding: 0;
    margin: 0;
    border:0;
    }
    i tried putting each of the top images in its own div and specifying everything for that but that didnt help either, and also i fiddled around a bit with the images so some of it looks right in FF but now it doesnt in IE :cross-eyed:
    Im thinking i might just make the header one big image and work out the other probs unless you guys can help me work this out.

  10. #9
    Junior Member
    Join Date
    Oct 2005
    Posts
    11
    Member #
    11703
    Ok here i put it online so you could see...
    http://www.muslimtents.com/lihoballah/newsite/index.htm
    open it in firefox and you can see the problem im having with the images at the top, other than that it looks perfect.
    Open it in IE and see for some reason the yellow part is pushed to the side a little even though there is no padding or margins anywhere and the images should all matched up since i sliced them from one image in photoshop!

    I hope you guys can help cos ive been trying to figure this out for AGES! lol

    heres the updated CSS and for the xHTML you can check the source of the link i gave you...
    Code:
    body {
    background: url("pics/bg.gif") maroon;
    font-family: arial,serif,sans-serif;  
    color: black;
    font-size: 100%;
    margin:0;
    padding:0;
    }
    
    img{
      padding: 0;
      margin: 0;
      border: none;}
    
    #container{
    padding: 0;
    margin: 0;}
    
    #header{
    width: 759px;
    height: 220px;
    padding: 0;
    margin: 0;}
    
    #menu{
    padding: 0px;
    margin: 0px;
    float: left;}
    
    .mbxt{
    width: 183px;
    height: 47px;
    padding: 0;
    margin: 0;
    background: url("pics/mbxt.gif") #660066;
    color: #ccccff;
    background-repeat: no-repeat;}
    
    .mbx{
    width: 183px;
    height: 223px;
    padding: 0;
    margin: 0;
    background: url("pics/mbx.gif") #CCCCFF;
    color: #660066;
    background-repeat: no-repeat;}
    
    .mbxt2{
    width: 183px;
    height: 45px;
    padding: 0;
    margin: 0;
    background: url("pics/mbxt2.gif") #800080;
    color: #ccccff;
    background-repeat: no-repeat;}
    
    .mbx2{
    width: 183px;
    height: 224px;
    padding: 0;
    margin: 0;
    background: url("pics/mbx2.gif") #CCCCFF;
    color: #660066;
    background-repeat: no-repeat;}
    
    #content{
    width: 576px;
    height: 539px;
    padding: 0;
    margin-left: 183px;
    background: url("pics/content.gif") #CCCCFF;
    color: #660000;
    background-repeat: no-repeat;}
    
    .heda{
    padding: 0;
    margin: 0;
    border:0;
    }
    
    #foot{
    width: 780px;
    height: 106px;
    padding: 0;
    margin: 0;}
    
    .fta{
    width:759px;
    height:50px;
    padding:0;
    margin:0;
    background: url("pics/footad.gif") #660066;
    color: #CCCCFF;
    background-repeat: no-repeat;
    }
    
    .ftc{
    width:759px;
    height:56px;
    padding:0;
    margin:0;
    background: url("pics/footcopy.gif") #CCCCFF;
    color: #660066;
    background-repeat: no-repeat;
    }
    :ermm:

  11. #10
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Well... your first div in your header uses a heda1 class ... which I can't find anywhere in you CSS.

    Also ... you have all these

    Code:
    ... {
       margin: 0;
       padding: 0;
    }
    You can remove all of them and simply put

    Code:
    * {
      margin: 0;
      padding: 0;
    }
    at the top of you CSS ... This will say that ALL elements have a margin and padding of 0.

    One more thing!? Why cut the header?! I would just put it all as one and be done with it!
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:49 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com