146 users online (0 members and 146 guests)  


  Results 1 to 7 of 7

Related

  1. Encyclopedia of HTML elements    Forum: HTML Forum
    Replies: 0
  2. Moving elements    Forum: Javascript Forum
    Replies: 4
  3. Drag and Drop elements    Forum: Website Scripts Forum
    Replies: 0
  4. tekno elements    Forum: Show it off!
    Replies: 7
  1. #1
    dobomode's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    6

    Question Block elements within inline elements

    According to the W3 spcification, inline elements should only contain other inline elements.

    Well, I was just building my website: http://www.dobomode.com and am having some troubles making it cross-browser compatible. In IE, everything is fine, but hardly is there anything that displays correctly in Mozilla/Netscape/etc.

    The thing is that, I am using a lot of CSS to format my navbar and main elements. Furthermore, I am using <span> tags for those two, and inside them I do use a lot of <div> tags.

    Please, could anybody tell me how to achieve the formatting and make it compatible in all browsers, without using tables and positioning.

    Thanks!

  2. #2
    dobomode's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    6
    Here is the CSS code for the navbar and main elements:

    span.navbar {
    width: 160px;
    overflow: hidden;
    vertical-align: top;
    background-color: #ddd;
    border-top: 3px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px double #000;
    margin: 30px 10px 0px 0px;
    padding: 20px 10px 20px 10px;
    font-size: x-small;
    }

    span.main {
    width: 500px;
    height: 400px;
    overflow: auto;
    vertical-align: top;
    text-align: left;
    background-color: #ddd;
    border-top: 3px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px double #000;
    margin: 30px 0px 0px 10px;
    padding: 20px 15px 20px 15px;
    }

  3. #3
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hiya, welcome to the forums.

    Going against the w3c recs is always going to lead to trouble.

    I would use nested div tags to acheive what you need. There should be no need to put block elements inside an inline element. Would not nested divs with classes or ids work?

    (note: I know your site is under construction, but I like the look so far. Simple and easy to use. Always my favourites )
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  4. #4
    dobomode's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    6
    Hi, QuietDean!

    Thanks for the reply!

    See the thing is that if I use div tags, then there is no way for me to put the two divs on one line (one would go below the other one) without using positioning (absolute or relative). And if I use positioning there is no way to center those in the middle of the page (unless I check the current browser's width and do some calculations with JavaScript, but that's too much of a hassle). So, I guess my question is: is there any way to do this in a simpler fashion?


    Thanks!

  5. #5
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Sure there is.

    look up float and clear here http://css.somepeople.net/cssref

    Float will let you have two divs next to each other. Also lookup text-align for your alignment issue.

    Float behaves a bit like the old-fashioned <img align="left"> tags, but is more powerful.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  6. #6
    dobomode's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    6
    But, text-align only works on inline elements in Mozilla, so it wouldn't work on <div>'s.

    I will look into the 'float' option.

    Thanks!

  7. #7
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Shouldn't do. text-align is for block elements, with inheritance. Will have to try it.

    Good luck with float!
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread