Professional Web Applications Themes

Updated CSS Box Model doentation??? - Macromedia Dreamweaver

eklemen This will do what it is you're trying to do: div#search { width: 190px; height: 90px; background: url(../images/bg_search.gif) repeat 0 0; border: 1px solid #eeb211; border-top: 3px solid #eeb211; padding: 4px 7px 7px 7px; position: absolute; top: 3px; right: 3px; width: 206px; /* MSIE 4.5-5.x/Win hack */ voice-family: "\"}\""; voice-family:inherit; width: 190px; /* width for standards compliant browsers */ } html>div#search { width: 190px: /*be nice to Opera rule*/ } I would also suggest that you set a color for your background in addition to the image. Some people (like myself) often run with images turned 'off' when doing ...

  1. #1

    Default Re: Updated CSS Box Model doentation???

    eklemen

    This will do what it is you're trying to do:

    div#search
    {
    width: 190px;
    height: 90px;
    background: url(../images/bg_search.gif) repeat 0 0;
    border: 1px solid #eeb211;
    border-top: 3px solid #eeb211;
    padding: 4px 7px 7px 7px;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 206px; /* MSIE 4.5-5.x/Win hack */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 190px; /* width for standards compliant browsers */
    }

    html>div#search
    {
    width: 190px: /*be nice to Opera rule*/
    }

    I would also suggest that you set a color for your background in addition to the image. Some people (like myself) often run with images turned 'off' when doing general information search. It's good practice to add that to your CSS background statement.

    HTH



    Yachats_Guy webforumsuser@macromedia.com Guest

  2. #2

    Default Re: Updated CSS Box Model doentation???

    Thanks for your reply!

    Unfortunately, it is still not working for me. I've attached a .zip file (which contains a .gif image) to show you what is happening in the browsers.

    The div#searchbox is on the right side of the screen and has some content inside the div. To be sure that no inside content is having an effect on the box, I have an empty div with the div#testbox id on it. Notice how the div#searchbox is wider and taller in NS which is causing it to overlap into the primary navigation bar.

    I greatly appreciate you help!
    Take care,
    eklemen(at)venturipartners(dotcom)

    Add this to the code I sent you on each and every declaration of width width: 206px !important and width: 190px !important

    I've got a feeling that for some reason the form elements are causing the problems here.

    Any chance I could look at the entire code? Sometimes it's better NOT to declare a 'padding' but instead use 'margin' on the elements inside of the DIV for MSIE 4-5.x/Win

    Let me know if the !important addition helps or not.


    Yachats_Guy webforumsuser@macromedia.com Guest

  3. #3

    Default Re: Updated CSS Box Model doentation???

    I added the "!important" without any luck.
    I'm attaching a zip of the files I'm working on so you can look at the code more closely.

    Thanks!
    eklemen(at)venturipartners(dotcom)


    [url]http://webforums.macromedia.com/attachments/css_trouble2.zip[/url]



    eklemen webforumsuser@macromedia.com Guest

  4. #4

    Default Re: Updated CSS Box Model doentation???

    eklemen wrote:
    > div#testbox {
    > border:10px solid black;
    > width:200px;
    > voice-family: "\"}\"";
    > voice-family: inherit;
    > width:400px; /* hack - IE6 listens to this line */
    From this it appears that you are trying to use Tantek's hack on IE 6, and
    it will not work on IE 6 and applies only to versions earlier than 6. What
    works for IE 6 is a standards-mode doctype, which DW does not give you by
    default. If you are using DW's doctype try this one instead:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    The difference is the URL at the end, and with this IE 6 will get the box
    model right, though you still need the hack for earlier versions. If you
    would like to try some other hacks, here is a good link to several:

    [url]http://css-discuss.incutio.com/?page=BoxModelHack[/url]

    If for some reason you need to keep IE 6 in quirks mode, the "box in a box"
    method is probably the easiest way to go.




    --
    trx
    trx Guest

  5. #5

    Default Re: Updated CSS Box Model doentation???

    eklemen webforumsuser wrote:
    >The div#searchbox is on the right side of the screen and has some
    >content inside the div. To be sure that no inside content is having
    >an effect on the box, I have an empty div with the div#testbox id on
    >it. Notice how the div#searchbox is wider and taller in NS which is
    >causing it to overlap into the primary navigation bar.
    You've seen what may happen with fixed-sized and absolute positioned
    elements. I would recommend to think over your layout to avoid such
    things, build your sites as flexible as possible. If you want an exact
    pixel-perfect layout you'd better move on to DTP or print magazines...

    However, I've rewritten your code a little, it's available under
    [url]http://www.mfesser.de/test/css_trouble2/setup_bannerhead.htm[/url]

    Maybe it can give you at least some hints, how things may be done to
    avoid problems like overlapping boxes. But I have to say:

    * it's far away from being a good and flexible solution, there are
    lots of things to improve (e.g. better names for ids/classes)
    * it still contains lots of pixel action like fixed widths etc.

    Micha

    Michael Fesser Guest

  6. #6

    Default Re: Updated CSS Box Model doentation???

    Yachats_Guy,

    Unfortunately my design does not allow for flexibility in the height of the search box. I'm going to have to work on getting that form to work cross browsers.

    Thanks,
    Eric


    eklemen webforumsuser@macromedia.com Guest

Similar Threads

  1. value in the model is getting updated but not in theview
    By yogini2212 in forum Macromedia Flex General Discussion
    Replies: 0
    Last Post: April 4th, 05:04 AM
  2. FMS2 client side doentation updated for as3?
    By mitchwilson in forum Macromedia Flash Flashcom
    Replies: 0
    Last Post: November 25th, 08:49 PM
  3. Datagrid not updated during delete, but updated during insert and update
    By Dmitry Korolyov in forum ASP.NET Data Grid Control
    Replies: 3
    Last Post: September 23rd, 04:09 AM
  4. Model within model transform.position, intersection, overlapping models
    By Zafada webforumsuser@macromedia.com in forum Macromedia Director 3D
    Replies: 0
    Last Post: August 30th, 12:30 AM
  5. Imported + updated symbols don't stay updated
    By Bbonnn webforumsuser@macromedia.com in forum Macromedia Fireworks
    Replies: 1
    Last Post: August 8th, 01:13 PM

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
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139