21 replies [Last post]
bjbj
Offline
newbie
Last seen: 13 years 27 weeks ago
Joined: 2005-10-26
Posts: 9
Points: 0

hi,

im trying to stack images vertically in a container. The images in question are navigation links which i want to create rollovers for. Having some issues getting the images to stack without a gap in firefox. You can view the issue at http://www.scafftag.com.au/carroll/

Works ok in IE 6 at the moment.

Any help appreciated

Heres my code

---------------------------------------
* {
padding: 0;
margin: 0;
}

body {
font: .8em "Lucida Sans", "Trebuchet MS", "Verdana", "Arial", "Sans-Serif";
}

a {
text-decoration: none;
color: #3B85CA;
}

a:hover {
color: #000;
}

#wrap
{
margin: 0px auto;
width: 765px;
background-color: #fff;
}

#header
{
height: 175px;
width: 765px;

}

div.float {
float: left;
display: inline}

#content {
text-align: left;
padding: 10px 30px 0px 30px;
font-size: 11px;
background-image:url(images/carroll_copy_09.jpg) ;
height: 596px;
clear:both;
margin:0;
border-right: solid 1px #A80157;
border-left: solid 1px #A80157;
}

#content h2 {
font-size: 15px; color:#3B85CA;
padding: 0 0 0 0;
font: "Arial", "Lucida Sans", "Trebuchet MS", "Verdana", "Sans-Serif";
}

#footer {
margin:0;
clear: both;
text-align: center;
color: #fff;
font-size:10px;
background-color:#003366;
height: 45px;
padding-top:8px;}

.meta {
padding-bottom:2px;
font-size: 10px;
color:#999999;
font:Arial, Helvetica, sans-serif;
}
-------------------------------------------

Carroll Australia - Wiring Accessory Specialists

Carroll Australia - The Wiring Accessory Specialists

19.11.2006

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer a libero ac ante tempus interdum. Donec non purus.
Donec sed dolor. Suspendisse faucibus. Aenean a nisl non
ante nonummy hendrerit. Proin lacinia malesuada ipsum.
Donec magna. Quisque risus magna, consectetuer non,
suscipit sit amet, interdum ac, nibh. Nulla facilisi.
Nullam lobortis, mauris et vehicula scelerisque,
urna lectus faucibus diam, vel congue enim ligula ac
tortor. Suspendisse venenatis auctor tellus. Nunc arcu
elit, suscipit non, semper in, accumsan eget, felis.
Cras id sapien at felis vulputate ullamcorper...

 

Read on.

 

Lorem Ipsum

19.11.2006

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer a libero ac ante tempus interdum. Donec non purus.
Donec sed dolor. Suspendisse faucibus. Aenean a nisl non
ante nonummy hendrerit. Proin lacinia malesuada ipsum.
Donec magna. Quisque risus magna, consectetuer non,
suscipit sit amet, interdum ac, nibh. Nulla facilisi.
Nullam lobortis, mauris et vehicula scelerisque,
urna lectus faucibus diam, vel congue enim ligula ac
tortor. Suspendisse venenatis auctor tellus. Nunc arcu
elit, suscipit non, semper in, accumsan eget, felis.
Cras id sapien at felis vulputate ullamcorper...

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

<div id="wrap"> <div

<div id="wrap">
<div id="header">
<div class="float"><img src="images/header.jpg" alt="header" width="603" height="175" /></div>
<div class="float"><img src="images/top.jpg" alt="top" width="162" /></div>
<div class="float"><img src="images/home.jpg" alt="home" width="162" /></div>
<div class="float"><img src="images/catalogue.jpg" alt="catalogue" width="162" height="25" /></div>
<div class="float"><img src="images/new.jpg" alt="new" width="162" /></div>
<div class="float"><img src="images/shop.jpg" alt="shop" width="162" /></div>
<div class="float"><img src="images/about.jpg" alt="about" width="162" /></div>
<div class="float"><img src="images/bottom.jpg" alt="bottom" width="162" /></div>
</div>

Doctor, we have a really bad case of Div-osis. I'm not sure the patient will survive! And the class-osis is just as bad!

Now, when you float something, you allow a block element to stack ALONGSIDE each other. What you want is that they "stack vertically"-- well, that's actually what divs and other blocks do naturally. If you just removed the float, they will definitely stack vertically!

You may have gotten the float idea from menus written properly-- as a list of links, where each menu item is an LI. LI's are not blocks by default so they are often floated-- and the anchors inside them are not blocks but are also often floated to get around an IE whitespace bug (just display: block sometimes make the links jiggle when hovered over). In fact, most of the time it's best to leave the li's alone, with some goofy statement about colour or something for IE7 to treat it correctly, and floating the a's, whether the menu is horizonal ot vertical. However if the a's (or li's) are floated and need to still stack vertically, then usually the menu was in a box with a fixed with (or the menu itself, a ul most of the time, is a fixed width) and the floats are set to 100% width. This means that while they had the capability of stacking alongside each other, there's no room, so you get the same visual effect as stacked blocks normally are.

So, if you keep that HTML, just stop floating them.

If you want a proper menu (a menu is considered a list of links, so we use lists-- ol's and ul's), you'd want something like this:

<div id="wrap">
<ul id="header">
<li><a href="index.html"><img src="images/home.jpg" alt="home" width="162" /></a></li>
<li><a href="catalogue.html"><img src="images/catalogue.jpg" alt="catalogue" width="162" height="25" /></li>
<li><a href="new.html"><img src="images/new.jpg" alt="new" width="162" /></a></li>
<li><a href="shop.html"><img src="images/shop.jpg" alt="shop" width="162" /></a></li>
<li><a href="about.html"><img src="images/about.jpg" alt="about" width="162" /></a></li>
</ul>

Problem with that code is that your text is locked up in images. Use image replacement instead:

  • Home
  • The text is in the link where it should be. The span has your image as a background image. The link (a) is positioned relatively so that the span can be an absolutely positioned child, sitting directly over the text, hiding it. This way, people with images on (most of us) can see the cool image. Those who are blind (like GOOGLE) or those who surf with images off because of dial-up issues (yup, lots of us still use it) still have text to read.

    The header.jpg can be set as the background of the ul (the ul is a box so acts like any div), so long as you set a height and width on the ul equal to the size of the image:
    ul {
    background: url(images/header.jpg) 0 0 no-repeat;
    width: 603px;
    height: 175px;
    }

    the first and last li's could be given a class each, so they can hold your top and bottom image:

  • home
  • li.top {
    set sizes;
    background: url(images/top.jpg) 0 0 no-repeat;
    }

  • I'm no expert, but I fake one on teh Internets

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 49 weeks 2 days ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    Quote:LI's are not blocks by

    Quote:

    LI's are not blocks by default so they are often floated

    Not so! LI is a block element.

    Otherwise I thought your post was sensible, but you got that bit wrong.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 10 years 13 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    I beg to differ, Ed!If you

    I beg to differ, Ed!

    Not that I've quite figured out what the hell a %flow element is, or what the difference is between a %block and a %flow, esp since first the W3C says in a grave voice: "There be but 2 sorts of elements, %blocks and %inlines." And then like the next line down, calling something a %flow. Wtf? Teh religious scholars, they should clarify what teh Prophets have said.

    I'm no expert, but I fake one on teh Internets

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 7 years 3 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Then you might want to

    Then you might want to figure out what %flow does mean! Smile it could well have a bearing on your conjecture here?

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 9 years 18 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    and %flow says nothing about

    and %flow says nothing about the LI element, its what it can contain.

    Reread your doctype. what %flow is explained up near the top, just after it defines %block and %inline Wink

    Also check out the definition or body (body %block) & p (p %inline) to get a better understanding of what is going on.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 7 years 3 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    and from all that you should

    and from all that you should be able to deduce what a li element actually is and what it can't be.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 10 years 13 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    Quote:Then you might want to

    Quote:

    Then you might want to figure out what %flow does mean! Smiling it could well have a bearing on your conjecture here?

    I've tried! I'm using this page: http://www.w3.org/TR/html4/struct/lists.html
    and then here: http://www.w3.org/TR/html4/sgml/dtd.html#flow
    where first I read that there's only block and inline. Looking at what block is got me a list of things that are blocks:

    But what they actually are, I never quite find out. I've had this page bookmarked for at least 3 months... I can only use it as a reference, but I can't actually read it.

    Like, when I was learning Finnish, I could pick out words in a sentence, yeah this means this and this means that. But I still couldn't read the sentence : )

    Quote:

    and %flow says nothing about the LI element, its what it can contain.

    As I was falling asleep after a too-much-beer party last week I was wondering about that... so was I mistaken all along in thinking that blocks can hold anything while inline can only hold inlines? Is it that blocks can only hold blocks, inlines can only hold inlines, and flows are blocks that can hold both?? And then what's a p, holding only inlines?

    The parts I don't have a dictionary for: 0 0, (%block I assume means what it is, or is it what it can contain??) + and + no clue... | (pipe) means and-or, right? last part says what it is in Engrish.

    I'm no expert, but I fake one on teh Internets

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 9 years 18 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    %flow = %block +

    %flow = %block + %inline.

    %block is all naturally block elements
    %inline is all naturally inline elements

    elements which can contain %flow can contain just about any other element

    semantic block elements (e.g. P, Hx) can only contain inline elements. In other words they can't be used as containers like LI, DIV and BLOCKQUOTE can. Some containers should only contain block elements (e.g. FORM, BLOCKQUOTE). All of this information is in the DTD document, mostly explained in the comments. E.g.

    <!--================== Block level elements ==============================-->
     
    <!ENTITY % heading "h1|h2|h3|h4|h5|h6">
    <!ENTITY % lists "ul | ol | dl">
    <!ENTITY % blocktext "pre | hr | blockquote | address">
     
    <!ENTITY % block
         "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
     
    <!ENTITY % Block "(%block; | form | %misc;)*">
     
    <!-- %Flow; mixes block and inline and is used for list items etc. -->
    <!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">

    <!--================== Content models for exclusions =====================-->
     
    <!-- a elements use %Inline; excluding a -->
     
    <!ENTITY % a.content
       "(#PCDATA | %special; | %fontstyle; | %phrase; | %inline.forms; | %misc.inline;)*">
     
    <!-- pre uses %Inline excluding big, small, sup or sup -->
     
    <!ENTITY % pre.content
       "(#PCDATA | a | %fontstyle; | %phrase; | %special.pre; | %misc.inline;
          | %inline.forms;)*">
     
    <!-- form uses %Block; excluding form -->
     
    <!ENTITY % form.content "(%block; | %misc;)*">
     
    <!-- button uses %Flow; but excludes a, form and form controls -->
     
    <!ENTITY % button.content
       "(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
        table | %special; | %fontstyle; | %phrase; | %misc;)*">

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 49 weeks 2 days ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    Great post there from Chris.

    Great post there from Chris.

    I must confess that all I really knew was that the LI element can contain block descendants, and that meant "block" to me. Now I see that it is both block and inline!

    I confess too that I don't have the patience to read through and understand the actual CSS specs.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 9 years 18 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    Ed Seedhouse wrote:Great

    Ed Seedhouse wrote:

    Great post there from Chris.

    I must confess that all I really knew was that the LI element can contain block descendants, and that meant "block" to me. Now I see that it is both block and inline!

    I confess too that I don't have the patience to read through and understand the actual CSS specs.

    Not CSS, but (X)HTML specs. There is no need to read them through. Just look things up from time to time. After a year or two you'll be surprised at your knowledge.

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 10 years 13 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    "Chris" wrote:%flow = %block

    "Chris" wrote:

    %flow = %block + %inline.

    Wait, it's block AND inline?? I asked my husband yesterday and he thought |(pipe) meant "or". Although a flow being a block OR an inline also doesn't make sense, it's one or the other right?

    Quote:

    elements which can contain %flow can contain just about any other element

    So the %whatever after the element name isn't what it is, but what it can contain? OKay...

    Quote:

    Flow mixes... meaning, that it IS a block AND an inline, or that it is an element that can Contain a block or an inline?

    I know that some elements like form and blockquote can only hold blocks as direct children but I still don't know why... still like memorising "The cheese is old and moldy, where is the bathroom" in another language, and knowing that by saying that you are getting directions to the bathroom but still not knowing the constructions of the words or the grammar.

    Actually, I've ended up using the Florida site for knowing who can be a valid child or parent of something just because it's easier to read: http://learningforlife.fsu.edu/webmaster/references/xhtml/tags/

    Maybe I don't have to know why, and just memorise who can do what, but I don't like that.

    I'm no expert, but I fake one on teh Internets

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 7 years 3 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    yes it is intended to

    Smile yes it is intended to impart what the element may contain not what it is strictly and yes the pipe character means 'or'.

    yes maybe there is too much overthinking going on!

    Now is the original post dealt with? as were doing a good job of hijacking it

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 47 weeks 3 days ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    Hugo wrote:... Now is the

    Hugo wrote:

    Smile...
    Now is the original post dealt with? as were doing a good job of hijacking it

    And now, to get back OT, as is our wont:

    The specs are not all that easy to read. Instructions for reading with some modicum of clue are found here.

    When reading the specs, elements are often grouped and given entity names, as the mentioned %flow, %block and %inline. These entities, when part of an element's description are always linked to their definitions. eg.

    <!--================== HTML content models ===============================-->
     
    <!--
        HTML has two basic content models:
     
            %inline;     character level elements and text strings
            %block;      block-like elements e.g. paragraphs and lists
    -->
     
    <!ENTITY % block
         "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
          BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
     
    <!ENTITY % flow "%block; | %inline;">
     
    <!--=================== Document Body ====================================-->
     
    <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
    <!ATTLIST BODY
      %attrs;                              -- %coreattrs, %i18n, %events --
      onload          %Script;   #IMPLIED  -- the document has been loaded --
      onunload        %Script;   #IMPLIED  -- the document has been removed --
      >
     
    <!ELEMENT ADDRESS - - (%inline;)* -- information on author -->
    <!ATTLIST ADDRESS
      %attrs;                              -- %coreattrs, %i18n, %events --
      >
     
    <!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
    <!ATTLIST DIV
      %attrs;                              -- %coreattrs, %i18n, %events --
      %reserved;                           -- reserved for possible future use -- 
      >
    ...
    Notice that %block is made up of three entities; %heading;, %list; and %preformatted;, plus several named elements. These entities must be further expanded to get the full range of what elements are block. See http://www.w3.org/TR/html4/sgml/dtd.html#block

    cheers,

    gary

    Now returning you to our regular programming.

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 7 years 3 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Yes but this is not OT

    Yes but this is not OT :rolleyes:

    Anyways just to clarify in plain old english the % is an internal shorthand notation designed to save having to glog the document up with the same repeated longwinded detail, explained once at top of document then referenced thereafter by the shorthand %flow, %block amongst others.

    Now to get back on topic, er...

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 4 years 31 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Quote:Like, when I was

    Quote:

    Like, when I was learning Finnish, I could pick out words in a sentence, yeah this means this and this means that. But I still couldn't read the sentence Smile

    I'm with Poes! Laughing out loud

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 4 years 31 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Quote:Like, when I was

    I knew that would happen!

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 10 years 13 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    Ah, Tommy sent me a nice,

    Ah, Tommy sent me a nice, plain-English explanation of how to read the DTD: http://www.autisticcuckoo.net/archive.php?id=2005/05/01/art-of-reading-dtd

    I do wish I'd had this several months ago.

    As for the original topic, I think I answered it... don't float your divs and they'll stack vertically cause that's what they do.

    I'm no expert, but I fake one on teh Internets

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 7 years 3 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Well wasn't that nice of

    Well wasn't that nice of Tommy, surprised that you hadn't come across that before seeing as you hang out on that forum.

    What Tommy fails to mention which would be helpful is what the syntactical notation used is called.

    BNF (Backus–Naur Form) is a formal grammar to express coding and is useful to have a grasp of as you'll then be able to better understand things.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 9 years 18 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    Stomme poes wrote:"Chris"

    Stomme poes wrote:
    "Chris" wrote:

    %flow = %block + %inline.

    Wait, it's block AND inline?? I asked my husband yesterday and he thought |(pipe) meant "or". Although a flow being a block OR an inline also doesn't make sense, it's one or the other right?

    In spoken language "or" often means "exclusive or", its this or its that but its not both.

    In logic (and programming) "or" always means "inclusive or", its this, its that or its both.

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 49 weeks 2 days ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    Chris..S wrote:In spoken

    Chris..S wrote:

    In spoken language "or" often means "exclusive or", its this or its that but its not both.

    In logic (and programming) "or" always means "inclusive or", its this, its that or its both.

    Computers being quite literal minded and unable to figure things like that out from context (as humans do without conscious thought), we've even had to invent our own little word ("xor") to help us understand how the little beasties think.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 10 years 13 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    Ah, I vaguely remember

    Ah, I vaguely remember boolean logic from back when I was building little breadboard circuits and flip-flops... and n' nand n' or n' nor... misspent youth, seeings how I don't remember a bit of it.

    Yeah I'm on the forum but I think I would have had to do some digging into the older parts to run into that... I don't visit sites I see in people's sigs most of the time.

    Quote:

    What Tommy fails to mention which would be helpful is what the syntactical notation used is called.
    BNF (Backus–Naur Form) is a formal grammar to express coding and is useful to have a grasp of as you'll then be able to better understand things.

    He mentions C programmers being familiar with it, and if I had continued reading my ANSI C book that my husband foisted on me (and wants me to read before really embarking on Javascript), then I likely would have understood it better.

    I'm no expert, but I fake one on teh Internets