CSS - Display: Inline Stops Height/width Working?

Hi Guys,

Consider the following box:

PHP Code:
<div style=border: 1mm black Solid;
 width: 148mm; 
height: 98mm;'>
</div> 





148mm + 1mm + 1mm = width of 150mm
98mm + 1mm + 1mm = width of 100mm

Now why does neither firefox or ie manage to get it? Firefox is about 2mm out and ie is about 3mm out?

Any ideas or is it some quirk?

Charlie

Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....

I'm having trouble getting the following to work

im = image

Code:

im im <div id = "controlText">Variable Length Text</div> im im

my style info

Code:

#controlText{
position:inline;
text-align:center
width:200px
}

I know that once I turn the div into an inline element I throw away the width which is what my problem seems to be.

What is happening is you click forward (these are calendar controls) one month and then the text is short and your mouse is now over the year forward button which you then accidently click. I want the div or whichever tag to alwasy have the same width no matter what the text.

Is there any other way to get this to work than multiple floated divs?

I've been seeing people using ul and li tags to make their menus in css.

So I've started trying to do the same, here is an example.

But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working?

How can I get this to work or is there any other way to get a ul li menu to display this way?

hi there, i'm using code from
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/P10/

for my menubar, the problem is when i refresh the page the menubar is on it stops working.

help please!

Real odd one here. Take a look at http://www.moxiegirlz.com/?section=moxiegirlz

Note that you can click on one of the characters at the bottom to see their info. But when you do so, the characters no longer get the "hand" pointer icon (in FF and Safari, haven't tested IE). I've tried applying cursor:pointer directly to the a tags, though one shouldn't need to, and still nada. Somehow, calling a jscript in the href is killing the hand pointer. Anyone know why?

I am trying to get a page that has 3 boxes in a row (horizontally) with the first two having a fixed width, and my problem is getting the third one to take up the rest of width - so I don't have to specifiy a width for the third one. I have tried the auto width which works great and shows up perfectly in Firefox but just leaves a not very wide box in IE. There is probably an easier or cleaner way to do this but this is what I have so far:

CSS:

#box1 {
width:70px;
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
position:absolute; top:250px; left:0px;
}

#box2 {
width:70px;
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
position:absolute; top:250px; left:97px;
}

#box3 {
width:auto; /*WIDTH IN QUESTION*/
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
position:absolute; top:250px; left:194px; right:0px;
}

HTML:

<body>
<div id="box1">TEST</div>
<div id="box2">TEST</div>
<div id="box3">TEST</div>
</body>

Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either.

http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm

Hi, I have been puzzle for a while now working out how to do this.

I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox).
Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE.

I currently have:
<div id="diva">
<object id="face1" width="320" height="110">
<param name="face1" value="face1.swf">
<embed src="face1.swf" width="320" height="110">
</embed>
</object>
</div>
<div id="divb">
<object id="face2" width="320" height="110">
<param name="face2" value="face2.swf">
<embed src="face2.swf" width="320" height="110">
</embed>
</object>
</div>
<div id="clear"></div>

With the relavent css:
#div1 {
background-image : url(images/bg1.gif);
width: 381px;
height: 346px;
float: left;
text-align : center;
vertical-align : bottom;
}
#div2 {

background-image : url(images/bg2.gif);
width: 381px;
height: 346px;
float: right;
text-align: center;
vertical-align : bottom;
}
#clear { clear: both; }
img {
border: 0px;
}
#face1{

padding-top: 220px;
left: 30px;
}
#face2{
position: relative;
top: 220px;
left: 10px;
}


Effectively what I want is:
Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE!

Thank you for your time.

Hello, my code works fine on my MAC browsers, but on my PC, IE6 browser, the buttons underneath the body of the page don't align.

Here's the site: http://www.caillouette.com/Utilitrek/three/
Here's the CSS:http://www.caillouette.com/Utilitrek/three/style2.css

Can someone tell me if this site looks okay in IE 7? I can't download IE 7 because of some technical quirk on my computer.

And if they don't align in IE 7, please tell me what I should do.

thanks
-Sean

This is bugging me to death. I cannot get these to top elements to display inline.
If anyone could take a look in firebug to see element and related css applied and tell me whats wrong.
The page is:
http://travelmagoo.com/index.php?option=com_resource&controller=article&article=384&category_id=201&Itemid=0

at the top header there is a title and to the right there is an image. I would like the image and title to be on the same line but everything i do will not let me do this.
any ideas?

Hello, I have a question about div's set to display: inline.

First let me explain what I'm trying to do so that if I'm going about it the wrong way you can show me the light. I'm trying to have multiple divs centered on the screen and lined up horizontally, like so:

| (div1)(div2)(div3)(div4) |

The thing is, I have images in the divs. I also have a border on the divs. So when I set display: inline, the border goes through the image (although the divs are positioned correctly with the body text-align: center). However, when I set display: block, the border is exactly how I want it (i.e. it includes the image) but the divs are placed one on top of the other vertically and they are left-aligned.

Is there a simple way to do this?
Thanks

Hi,

My site is loading fine in IE but messing up in FF, the tables (yes tables, sry) are loosing all height and widths. Ive had a look about but cant work out how to fix/get around this.

HTML Code:

<div id="products">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ED1C24" style="width:194px; height:114px; margin-right:5px;margin-bottom:5px;">
<tr>
<td align="left" class="code" style="padding-left:3px;">
	AKA
</td>
<td align="right" class="name" style="padding-right:3px;">
	TITLE
</td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle" style="background-image: url(images/item_bg.gif); background-repeat:no-repeat;">
	<a href="details.php?id=CODE">
	<img src="images/products/photos/CODE.jpg" alt="TITLE" border="0" style="height:84px; width:184;" /></a>
</td>
</tr>
</table>
</div>

CSS
Code:

#products { padding-bottom:10px; line-height:20px; font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:1px; display:inline-table; vertical-align:top;}
#products table {display: inline}

How can i get the same effect so FF looks the same as IE?

Thanks for any help.

Mike

I am working on a drupal site and I having problems getting some images in a block to display inline. I am able to effect some of the aspects of the images (they are list items in a ul) but I can't get them to display inline.

Here is the html from the source: <div id="block-views-recent_images" class="block block-views">
<div class="blockinner">
<h2 class="title"> recent images </h2>
<div class="content">
<div class='view view-recent-images'><div class='view-content view-content-recent-images'><div class="item-list"><ul><li><div class='view-item view-item-recent-images'><div class='view-field view-data-node-data-field-user-images-field-user-images-fid'><a href="/image-upload/admin/05-sep-2007/204"><img src="(xxxxxx) image_0.jpg" alt="" title="" /></a></div></div>
</li><li><div class='view-item view-item-recent-images'><div class='view-field view-data-node-data-field-user-images-field-user-images-fid'><a href="/image-upload/admin/05-sep-2007/201"><img src="(xxxxxxx) image.jpg" alt="shack" title="some image" /></a></div></div>
</li></ul></div></div><div class='more-link'><a href="/recent_images">more</a></div></div>

And here is the css that I have attempted so far:

#block-views-recent_images {
background: #EBE9ED;
}

#block-views-recent_images li{
list-style-image: none;
list-style-type: none;
padding: 0;
margin: 0;
display: inline;
}

I am new to CSS so I know I may have taken a completely wrong approach. Thanks for any suggestions on how to get the images to display inline.

Thanks

hi, I am having problems with nav list

It displays inline on firefox but not in IE..but I can not see why? any ideas??

thanks

PHP Code:
/* NAV */

    #nav {
        width: 420px;
        height: 70px;
        float: right;
        margin: 0;
        padding: 0;
    }

    #nav li.on ul, #nav li.off ul {
        margin: 0;
        padding: 0;
    }

    #nav a {
        text-decoration: none;
    }

    #nav li { /*float the main list items*/
        margin: 0;
        float: right;
        display: inline;
        padding-right: 0px;
        background: url(../images/pipe.gif) no-repeat;
        background-position: 0 10px;
    }

    .noback {
        background: none;
    }

    #nav li ul {
        display: none;
        float: right;
    }
    
    #nav li.off ul, #nav li.on ul { /*put the subnav below*/
        position: absolute;
        top: 88px;
        *top: 104px;
        left: 503px;
        padding-top: 10px;
        height: 28px;
        width: 420px;
    }

    #nav li a {
        color: #155089;
        font-size: 20px;
        display: block;
        height: 15px;
        padding: 10px;
        
        background-position: 0 10px;
    }

    #nav li.on a {
        color: #000;
        background-position: 0 10px;
    }

    #nav li.on ul a, #nav li.off ul a {
        float: left; /*ie doesn't inherit the float*/
        border: 0;
        color: #C1D1E0;
        width: auto;
        margin-right: 0px;
        font-size: 18px;
        line-height: 0px;
        background: none;
    }

    #nav li.on ul {
        display: block;
        background: none;
    }

    #nav li.off:hover ul {
        display: block;
        z-index: 6000;
        background: #fff;
    }

    #nav li.off a:hover, #nav li:hover a {
        color: #000;
        background: #fff;
        background: url(../images/pipe.gif) no-repeat;
        background-position: 0 10px;
    }

    #nav ul li.off a:hover, #nav ul li:hover a {
        color: #000;
        background: none;
    }
    
    ul#nav li.off ul li, ul#nav li.on ul li {
        background-image:none;
    }
    
    ul#nav li.off ul li a:hover, ul#nav li.on ul li a:hover {
        background-image:none;
    }
    
    ul#nav li.on a.nopipe, ul#nav li.off a.nopipe {
        background-image:none;
    }

    /* END OF NAV */ 





and the html

PHP Code:
<div id="divnav">
        
        <ul id="nav">
        
        <li class="off"><a href="#">contact</a></li>
        
        <li class="off"><a href="#">products</a>
            <ul>
            <li><a href="#">testemonials</a></li>
            <li><a href="#">samples</a></li>
            </ul>
        </li>
        
        <li class="off"><a href="#">about us</a>
            <ul>
            <li><a href="#">processes</a></li>
            <li><a href="#">plant list</a></li>
            <li><a href="#">benefits</a></li>
            <li><a href="#">features</a></li>
            </ul>
        </li>
        
        <li class="on" style = "background-image:none;"><a href="#" class = "nopipe">home</a></li>
        
        </ul>
        
        </div> 





thank you