CSS - Is It Ok To Mix Inline And Block Elements?

I'm reading the "containing blocks" section of http://www.brainjar.com/css/positioning/:

"Block boxes are generated by elements such as P, DIV or TABLE."

<div>
This is the first sentence.
<p>This is the second sentence.</p>
</div>

"It's interesting to note that while the text of the first sentence in the above example generates an inline box"
-Didn't they say that block boxes are generated by div? So why isn't the text of the first sentence in a block box?

I hate IE so much.

Ok, I have a list, with a display:inline-block; property.
Wanting a row of images, with text under each mage.

I thought I solved this with this property, but with IE, it doesnt put the images in a row, but places them one under the other.

FORM:
Code:

<ul>
<li>
<img src="images/news/dummy.png" name="News" width="100" height="100" /><br />
Category<br />
00/00/00</li>
</ul>

CSS:
Code:

#images ul
{
list-style:none;
text-align:center;
}

#images li
{
margin-right:15px;
display:inline-block;
}

Either a fix for IE, or a alternative to this would be great.
Thanks in advance, Joe.

I'm new to CSS (Other then very basic CSS)

Anyway I have a menu which uses a tags, that also have a background image.

I am adding in the background image with CSS, I have the display set to inline-block as block would put everything to the next line and inline would not allow for the image to show though in full (only enough for the text inside the link.

Anyway using display: inline-block it seems to put padding on the links, is there a way to remove this? i want the background images from the links to be next to each other with no spacing or padding.

My code:

#buttonBackground {
display: inline-block;
background-image:url(/media/images/button_background.jpg);
background-repeat:no-repeat;
width: 113px;
padding-top: 4px;
height: 23px;
text-align:center;
vertical-align: bottom; (This isn't working either?)
}

and a sample link:

<a href="default.asp" id="buttonBackground">HOME</a>

Anyone able to help me remove the padding surronding the a tag?

Hello,

First, I am new to webcoding so I apologise if what I am asking is too stupid. I am doing a little navigation bar for my blog with the hover effect. My problem is that the hover effect only work when I use {display: block;} but I need it to be inline, because when doing {display:block} it displays vertically. However when I do {display: inline-block;} the list items do show up inline horizontally but they show up only as images, neither does the hover effect or the links work.

Second, in IE and in chrome it displays differently.

Thank you very much for all the help!

Also, here is the code!

CSS

#header-wrapper2{
height:80px;
width:580px;
margin:0;
float: right;
background-color: #000000;
}

#header-wrapper2-navbar{
height: 40px;
width: 243;
margin-top:40px;
margin-left: 3px;
padding:0;
}

#header-wrapper2-navbar li{
margin:0;
padding:0;
}

#header-wrapper2-navbar li,#header-wrapper2-navbar a{
height: 40px;
display: block;
}

#news{
left:0px;
width:78px;
background: url('') 0 0;
}

#news a:hover{
background: url('') 0 -44px;
}

#products{
left:78px;
width:88px;
background: url('') -78px 0;
}

#products a:hover{
background: url('') -78px -44px;
}

#about{
left:166px;
width:77px;
background: url('') -166px 0;
}

#about a:hover{
background: url('') -166px -44px;
}

HTML

<div id='header-wrapper2'>
<ul id='header-wrapper2-navbar'>
<li id='news'><a href='()></li>
<li id='products'><a href='></li>
<li id='about'><a href='></li>
</ul>
</div>

I'm trying to display 5 images across, and underneath each image will be a caption.

So, i'm using an inline list, but how do I go about getting something to the second line for each list item, seems that inline-block works fine in IE, but since its not available for Firefox, what's the method people use here?

I usually lurk in the Javascript forum, but a frustrating CSS issue has presented itself. I've googled this extensively and haven't found any working solutions. I'll write in pseudo-code what I want to happen, and hopefully someone can fill in the blanks... here goes:

Code:

<style type="text/css">
  .container {
    display: inline-block;
  }

  .title {
    align: left;
  }

  .subtext {
    align: right;
  }
</style>

<div class="container">
  <div class="header">
    <div class="title">Title Goes Here</div>
    <div class="subtext">Align Me Right</div>
  </div>
  <div class="content">
    Variable content which container needs to size dynamically to fit.  Could be 300px wide, could be 500px wide...
  </div>
</div>

What I've tried so far: Tried setting the container width to 1% so IE would autosize to content (while setting white-space: nowrap for the title/subtext), but IE wrapped between the title and subtext elements) Played around with setting absolute widths for the container, but I would really prefer being able to have variably sized content
And unfortunately (in many ways) it only has to work in IE. Any help would be greatly appreciated. Thanks!

Hello, I a horizontal navigation within <ul><li> tags. Here is the css for the navigation <ul><li> and the first button.

Code:

#nav li{
display:inline;
}


a#aboutrollover { 
background-image:url(images/nav/about_off.gif); 
background-repeat:no-repeat;
width:77px;
height:18px;
display:block;
}

a#aboutrollover span { display:none; }

a#aboutrollover:hover { 
background-image:url(images/nav/about_on.gif);
background-repeat:no-repeat;
width:77px;
height:18px;
}
 

You'll notice that for the button, I have display set to "block." Well, if I set it as "inline" or don't put a display, the span text shows. But the block makes the <li>'s stack upon each other.

Here's the navigation code :: Code:

<ul id="nav" name="nav">
<li> <a onclick="updateWithAbout()" href="#" id="aboutrollover"><span>About Cats Meow</span></a> </li>

<li> <a onclick="updateWithGuest()" href="#" id="guestrollover"><span>Guest Pics</span></a> </li>

<li> <a onclick="updateWithStaff()" href="#" id="staffrollover"><span>Cats Staff</span></a> </li>

<li> <a href="#" id="webcamsrollover"><span>Cat's webcams</span></a> </li>

<li> <a onclick="updateWithParties()" href="#" id="partiesrollover"><span>Cat's Meow Parties</span></a> </li>

<li> <a onclick="updateWithContact()" href="#" id="contactrollover"><span>Contact Cats Meow</span></a> </li>
</ul>

I also tried display: run-in; and display:compact; instead of display:block;. But the first 2 options would make my navigation dissapear.

Here is the site:: http://www.catskaraoke.com/index2.php

Is there a simple solution to displaying the navigation horizontally? I know I can make it work, but it's a bit of excessive code for something that should be easy.

thanks

Hey everyone,

I seem to be having problems on IE7 for a clients website (http://beitelligent.com/clients/sportsdome/ ).. If you view it on IE8 or Firefox 2.X+ it seems to display correctly, all on the same line.. on IE7 it still displays it as a list..

Does anyone know why this is?

Thanks,
Peter Barbosa

Thanks for taking the time to read my question.

I have a <div></div> that I am using to make a bar across my page. In this bar I am placing the links to the other pages on the site.

If I don't use float, the height is messed up. If I do use Float, the width shrinks to the minimum. So I added width: 100%; but that made it wider than the rest of the other bars I already have... at leasts in FF, but not in IE.

What should I be using? Float? Block? Inline? I've read the descriptions on http://www.w3schools.com/css/pr_class_display.asp but am still unclear on how to use them.

I would like to have an area as wide as the page, with links in it so that the height fits the text + the padding.

Does DocType help this? Not to clear on how to use that either.

Thanks again,

Brad




my code below.

HTML:
Code:

<html>
<!-- Generated by AceHTML Freeware http://freeware.acehtml.com -->
<!-- Creation date: 20-Jan-2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contribution Help</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="piercedjunkmail@hotmail.com">
<meta name="generator" content="AceHTML 5 Freeware">
<link href="ChurchHelp.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Bar1"></div>
<div id="TitleBar">Help for You</div>
<div id="MenuBar">
<div id="MenuItem"><a href="index.html">Home</a></div>
<div id="MenuItem"><a href="General.html">General Help</a></div>
<div id="MenuItem"><a href="Settings.html">Settings Help</a></div>
<div id="MenuItem"><a href="Contribution.html">Contribution Help</a></div>
<div id="MenuItem"><a href="Member.html">Member Help</a></div>
<div id="MenuItem"><a href="SiteMap.html">Site Map</a></div>
</div>
<div id="imgCont">
<img src="Images/ContributionForm.jpg" border="0" width="427" height="287" alt="">
</div>
</body>
</html>

CSS:
Code:

body {
margin: auto;

background-color: #bcb277;
font-family: Veranda, Arial, sans-serif;

}

#Bar1 {
background-color: #CC9900;
height: 10px;
}

#TitleBar {
background-color: #330033;
height: 30px;
color: green;
font-weight: 25px;
padding-top: 5px;
padding-left: 10px;

}

#MenuBar {
display: compact;
/*float: left;*/
/*width: 100%;*/
background-color: #006600;
padding: 2px;

}

#MenuItem {
float: left;
margin-left: 30px;
color: white;
}

#imgCont {
float: left;
padding: 12px;
background-color: #a99a66;

}

a:link {
    color: white;
	text-decoration: none;
}
a:visited {
    color: #DCDCDC;
	text-decoration: none;
}
a:hover {
    color: #A9A9A9;
	text-decoration: overline underline;
}
a:active {
    color: #8B0000;
}

I have been trying in vain to get div elements on a page to behave how i want them to. I have a list of items, in the middle of which i need to display some tablular information witha picture along side it. This i have managed to acieve fine, but i can't get the next <li> to start below these 2, it starts alongside and the wraps underneath. I have tried everything. Can anyone help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#wrapper{
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-left: 20px;
width: 550px;
font-size: 12px;
line-height: 22px;
letter-spacing: 0.5px;
color: #666666;
}
#topimg {
margin: 20px 0;
padding-bottom: 20px;
border-bottom: 1px dotted #CCCCCC;
text-align:left;
display:block;
}
#secondimg {
margin: 0 0 0 20px;
text-align:left;
display:block;
}
#bodyimg{
padding: 20px 0px 20px 20px;
float:left;
display:block;
}

#listtable{
padding-top: 20px;
padding-bottom: 20px;
float:left;

font-size: 10px;
letter-spacing: 0.5px;
color: #891C46;
list-style-type: none;
line-height:18px;
}
#listtable li{
margin: 1px;
padding: 1px;
}

#listtable div {
margin: 1px;
padding: 1px;
background-color: #F7F7F7;
}
-->
</style>
<title>Carlton</title>
</head>

<body>



<div id="wrapper">

<div id="topimg">
<img src="/carlton-newsite/img/planandbuy/planandbuy.gif" width="173" height="33">
</div>

<div id="secondimg">
<img src="/carlton-newsite/img/planandbuy/thebasics.gif" width="133" height="23">
</div>

<ul>
<li>Cinema Advertising is available in weekly blocks starting on Fridays.</li>
<li>It is possible to buy <em> guaranteed admissions</em> by TV region, <em> follow specific films</em> or <em> nominate individual screens</em>. </li>
<li>The minimum time unit available is 5 seconds. Prices differ based on commercial length with indeces using 30&rdquo; as a base: </li>


<div id="listtable">
<table width="200" border="0" cellspacing="0" cellpadding="0" class="nobullet">
<tr>
<td width="105">
<li>
<div>5&rdquo;</div>
</li>
<li>10&rdquo;</li>
<li>
<div>20&rdquo;</div>
</li>
<li>30&rdquo;</li>
<li>
<div>40&rdquo;</div>
</li>
<li>45&rdquo;</li>
<li>
<div>50&rdquo;</div>
</li>
<li>60&rdquo;</li>
<li>
<div>90&rdquo;</div>
</li>
</td>
<td width="95">
<li>
<div>.3&rdquo;</div>
</li>
<li>.5&rdquo;</li>
<li>
<div>.8&rdquo;</div>
</li>
<li>.1.00&rdquo;</li>
<li>
<div>.1.33&rdquo;</div>
</li>
<li>.1.50&rdquo;</li>
<li>
<div>.1.67&rdquo;</div>
</li>
<li>.2.00&rdquo;</li>
<li>
<div>.3.00&rdquo;</div>
</li>
</td>
</tr>
</table>
</div>

<div id="bodyimg">
<img src="/carlton-newsite/img/digital_adver/satelite.jpg" width="220" height="182">
</div>


<li>Cinema commercials are shown on 35mm film, it is easy to get your TV ad transferred by our production department. </li>
<li>Lead times from booking to getting on screen are 3 weeks, although CSA&rsquo;s <em> Early Booking Incentive</em> guarantees extra value if you can book your campaign 6 weeks in advance of start date. </li>
<li>Cinema Advertising Association <em> cinema buying guidelines</em> ensure your campaign meets industry agreed standards. </li>

</ul>
</div>

</body>
</html>

hi, Im making a menu that looks like:
link1 link2 link3 link4

and then wen you hover over link a dropdown may appear

i have the problem that when they appear, they lay on top of each other. ANy idea how to make they display under each other. (it doesnt even work in IE at the mo, but i gues ill laft2 sort that later)

thanks

this is the html: PHP Code:
<ul>
<li><a href="index.php?action=home">home</a></li>
<li><a href="index.php?action=whatnew">what's new</a></li>
<li><a href="index.php?action=offers">special offers</a></li>
<li><a href="#">collections</a>
    <ul><a href="#">drop1</a></ul>
    <ul><a href="#">drop2</a></ul>
<!--when looping thru categories, do a WHERE cat_status >= 2-->
</li>
<li><a href="index.php?action=sBask">shopping basket</a></li>
<li><a href="index.php?action=contact">contact us</a></li>
</ul> 





this is the relevant css:
PHP Code:
#nav ul li {
        position: relative;
        margin: 0;
        padding: 0 10px 0 10px;
        list-style: none;
        display: inline;
    }

    #nav ul li ul {
        position: absolute;
        display: none;
    }
    
    #nav ul li:hover ul {
        display: block;
        left: 0;
        top: 10px;
    }

    #nav ul li:hover ul li {
        height: 20px;
    } 

Hello,

I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline).

I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit?

The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>.



Would appreciate any thoughts on the matter,

Cheers!

Hi all

I'm stumbling over the oddities of IE's hasLayout again and again, and often I can fix it using the properties overflow:auto and display:inline-block:

Code:

div#container {
  overflow: hidden; /* For clearing floating inner elements */
  display: inline-block; /* For regarding margins of inner elements etc. */
}

(Of course I only assign the display value to IE only.)

As far as I could see so far, assigning these properties does not affect the expected behavior of the element in any negative way.

Now I thought: why not assign them to all div elements as default?

Code:

div {
  overflow: auto;
  display: inline-table;
}

I didn't test this yet, but as long as the whole website's other CSS and the whole XHTML structure are clean (speak: the elements are only used for purposes they are intended to be used), this shouldn't have any negative consequences, should it?

Thanks for your opinion,
Josh

Hi Guys,

I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet.

Like this (. is the li):
.
Here is My Div Content

I want it to be like this:
. Here is My Div Content

Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure).

Here is my markup.

<ul>
<li>
<div class="dragHandle">
</div>
</li>
</ul>

DragHandle class is as follows
.dragHandle
{
width: 20px;
height: 25px;
background-image: url(/styles/icons/selectarrow.JPG);
background-position: center;
background-repeat: no-repeat;
cursor: move;
}

Hello,
I have the following css
css Code:
Original - css Code ul#menulist{ position:relative; top:0px; list-style-type:none; margin:0; padding:0; } ul#menulist li{ background-color:#717100; display:inline; margin:0; padding:0 10px; border:0; height:30px; } ul#menulist li a{ text-decoration:none; margin:0; padding:0; border:0; }

  

  


 ul#menulist{


     position:relative;


     top:0px;


     list-style-type:none;


     margin:0;


     padding:0;


 }


  


 ul#menulist li{


     background-color:#717100;


     display:inline;


     margin:0;


     padding:0 10px;


     border:0;


     height:30px;


 }


  


 ul#menulist li a{


     text-decoration:none;


     margin:0;


     padding:0;


     border:0;


 } 

A gap is appearing between <li> elements in Opera and FF but not in IE. You can check it here
Which is the correct behaviour? How do I remove the gaps between <li> elements in a valid way.
Thank you.