SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    London, UK
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple Layout issue

    Hi guys,

    Simple problem here I believe! I am trying to get two divisions to sit on the same line. both division are 50% of the container divisions width. I have attached links to the site and the css code that I have used, any ideas you may have would be greatly appreciated.

    The problems areas have a background colour of red and yellow.

    http://web.ukonline.co.uk/graham.marsh1/howtobook.html

    http://web.ukonline.co.uk/graham.marsh1/css/master.css

    Thanks in advance

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    #bookingforms{float:left; and maybe a height
    #getadobe{float:right; and maybe a height

    #browserbar{clear:both;

    and #getadobe img{display:block;}

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    London, UK
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting there

    Ok having got my page to work with its layout correctly, I now have found an infuriating glitch in the master plan.

    I have selected for a footer bar that runs right across the screen to clear two other divisions that are above it as they were wrecking it's style.

    In IE and Opera there is a lovely gap between the two divs above and the footer, whereas in FF there is no gap! If I put in a top margin to the footer bar I can rectify this, however the space that this produces is then displayed in IE/Opera and then the gap starts to get ridiculously big.

    IS there any way to make the top margin only appear in FF and not in the others.

    Any help would be appreciated.
    Last edited by Morn; Jun 22, 2006 at 05:47.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello


    double margin bug IE
    #bookingforms{display:inline;
    margin left 300px to much for screen 800 wide
    margin-left:150px;

    haslayout in IE
    * html #bookingforms,* html #getadobe,* html #browserbar{height:1%;}

    see FAQ CSS

    PS set a bottom margin on the two floats

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    London, UK
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That does not work, I have tryed it with just the code that you gave me, and the result was not pleasent. Lots of spliting the pink box up and all that jazz. Any other ideas??

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Works for me Please validate your code it has lots of errors, also consider a more semantically approach (your H tags need no wrapper div, etc)
    and use html 4.01 strict, or if you have to a xhtml 1.0 strict DTD

    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" xml:lang="en" lang="en">
    <head>
    
    <title>How to book!</title>
    
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="keywords" content="cat, cats, catteries, cattery, accommodation, kennel, kennels, cat housing, luxury cat accommodation, cats, kent, boarding, English kennels, dobys boarding cattery, cattery in orpington, UK, catteries england, feline accommodation, south-east, cat facilities, boarding, english catteries, feline 
    hotel, pets, cattery, boarding catteries, board cat, cat hotel, cat boarding, hotel for cats, best cattery, orpington, doby's cattery, doby's, dobys, cattery in orpington, 
    small, charterhouse road" />
    
    <meta name="author" content="Graham Marsh" />
    	
    <link rel="stylesheet" href="css/master.css" type="text/css" />
    <link rel="icon" href="favicon.html" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.html" />
    
    
    
    <script language="javascript" type="text/javascript">
    
    //Day display array
    var datetime = new Date();
    
    var weekday=new Array(7)
    weekday[0]="Sunday"
    weekday[1]="Monday"
    weekday[2]="Tuesday"
    weekday[3]="Wednesday"
    weekday[4]="Thursday"
    weekday[5]="Friday"
    weekday[6]="Saturday"
    
    //Month display array
    
    var month=new Array(12)
    month[0]="January"
    month[1]="February"
    month[2]="March"
    month[3]="April"
    month[4]="May"
    month[5]="June"
    month[6]="July"
    month[7]="August"
    month[8]="September"
    month[9]="October"
    month[10]="November"
    month[11]="December"
    
    
    </script>
    
    </head>
    
    <body>
    
    <div id="container">
    
    	<div id="scriptbuttons">
    
    <input type="button" name="home" value="Home" class="mybutt" onclick="document.location.href='index.html'" />
    
    <input type="button" name="aboutus" value="About Us" class="mybutt" onclick="document.location.href='aboutus.html'"/>
    
    <input type="button" name="wherearewe" value="Where are we?" class="mybutt" onclick="document.location.href='wherearewe.html'" />
    
    <input type="button" name="paperwork" value="Pricing and Information!" class="mybutt" onclick="document.location.href=''" /> <!--needs link-->
    
    <input type="button" name="paperwork" value="How to book!" class="mybutt" onclick="document.location.href='howtobook.html'" />
    
    	</div>
    	
    	<div id="dateinfo">
    
    <span class="timedate"><script type="text/javascript">document.write(""+ weekday[datetime.getDay()], " "  + (datetime.getDate()), " "+ month[datetime.getMonth()], " " + (datetime.getFullYear()))</script></span>
    	
    
    	</div>
    	
    	<div id="header">
    
    <h1 class ="header">How to Book</h1>	
    	
    	</div>
    
    	<div id="importantinfo">
    <h1 class="importantinfo">Please note that we are currently unable to offer online booking.<br /></h1>
    <h3>For booking enquires please contact us on 01689-877018 where somebody will be happy to help you.</h3>
    	
    	</div>
    	
    	<div id="pic">
    <img src="images/cat.jpg" width="150px" height="168px" id="imgborder"/>
    
    	</div>
    
    	<div id="info">
    
    For speed and convenience we have provided links to our brochure and booking form below.
    
    <p />
    <span class="remember">To book follow these simple steps:</span>
    
    <ol class="decimal">
    
    <li>Print Brochure and Booking form using the links below.
    
    <p />
    
    <li>Contact Doby's with details of any dates required on 01689-877018. (<span class="remember">REMEMBER!</span> Filghts & Ferrys can be delayed so book an extra night to be sure)
    
    <p />
    
    <li>Have general information about your cat available. (i.e. name, age, sex, breed, any medical conditions etc..)
    
    <p />
    
    <li>If we are sending a form to you please check that all details have been entered correctly (ammending where nessecery), sign and return the form to us within seven days along with your deposit. <span class="remember">(No Deposit = No Booking! Please ensure you include it.)</span>
    
    <p />
    
    <li>If you are printing your own booking form, please ensure that it is fully compleate and that only dates confirmed by us are entered. Return the compleated form to us including deposit to the address below. (Any dates that have not been confirmed will be considered a non booking)
    
    </ol>
    </div>
    
    
    <div id="bookingforms"><a class ="bookingforms" href="documents/brochure-web.pdf" onclick="window.open(this.href); return false;">Brochure and terms and conditions:</a> Requires Adobe Reader:<br /><a class ="bookingforms" href="documents/bookingform-web.html" onclick="window.open(this.href); return false;">Booking Form:</a> Requires Adobe Reader:<br /></div>
    
    <div id="getadobe"><a href ="http://www.adobe.com/uk/products/acrobat/readstep2.html" onclick="window.open(this.href);return false;"><img class="get-adobe"src="images/get-adobe.gif" /></a></div>
    <div id="browserbar">These pages are best viewed in the latest <a class="browserbar" href="http://www.microsoft.com/" onclick="window.open(this.href);return false;">Internet Explorer</a>, <a class="browserbar" href="http://www.mozilla.com/firefox" onclick="window.open(this.href);return false;">Mozilla Firefox</a> or <a class="browserbar" href="http://www.opera.com/" onclick="window.open(this.href); return false;">Opera</a> browsers.</div>
    
    </div>
    </body>
    </html>

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    London, UK
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to ask to many questions here, I am very greatful of your time helping me here. If I validate using XHTML strict will it show more errors?

    Why would i want HTML4.01 over xhtml is there a benefit.

    W3C say tha xhtml is the new standard so surely that makes it the most appropriate to use!

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    use a DTD that gets IE in the same box model as FF NS Moz OP, the errors are html errors like missing end tags, etc, you have to correct them fist and then see how the page behaves


Bookmarks

Posting Permissions

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