CSS - H2 Tags Inline In Ie

Sometimes CSS makes me want to tear my hair out.

I'm trying to make a custom form input that is a combination of a regular select drop down and a multiple select. I have the javascript all sorted out and my input works like a charm. I can't figure out any way to make it display like a <select> does though.

I thought I could simply do this: <ul style="display: inline">
According to w3schools, this will tell the element to display without a line break before or afterward. Much to my despair, it's not that simple.

Here's an example:
Code:

<div>
This is some text
<select name="test">
<option value="">Click to expand</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</div>

<hr />

<div>
This is some text
<ul name="test" style="display: inline;">
<li>Click to expand</li>

<ul style="display: none;">
<li value="1">One</li>
<li value="2">Two</li>
</ul>

</ul>
<input type="submit" value="Submit" />
</div>

Notice how the regular old html input sits nicely inline with the text before it and the submit button after it?

Notice how the ul doesn't, despite the fact it's set to display inline? Anybody have any suggestions?

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?

I am new to this forum and need some help!

I am creating a page and the sidebar has links. I have a graphic link that I DO NOT want highlighted. I have tried everything I can think of, but I don't think I am able to apply the link styling as an inline style, or am I wrong. Any help would be appreciated!

http://annesweb.com/abramoff/

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?

Hi there...

Simply enough, I'd like to get my column widths (for the "menu" and "content" div's) appearing in IE5+ as they do in Firefox.

URL: http://www.cbaa.org.au/3cfor_web/ejournal_header.html
CSS: http://www.cbaa.org.au/3cfor_web/layout2.css

I've tried this technique: http://glish.com/css/hacks.asp but I'm not sure what I'm doing wrong.

Any help greatly appreciated.

The Problem: I want my logo (a gif image) to justify to the left but padding centers it.

Is there a way to NOT pad one "cell" in an inline navigation bar using css without affecting the rest which follow (which are padded)?

Please email me for urls to see exactly what I'm working with.

Many thanks in advance!

I need to style all images within a div. For example, I want to do something like this:
<div style="img{border: 0;}">
<img src="" />
<img src="" />
<img src="" />
</div>

But that does not seem to work. Is it this possible with css?
It is for an ebay template, so I don't think I can reference a separate stylesheet.

thanks.
Charley

I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label.

I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>.
Code:

<div id=secondline>
  <span id=ed>
    <b>Event Definition</b>:<br>
    <textarea name=inject cols=45 rows=6></textarea>
  </span>
  <span id=after>
    <b>After</b><br>
    <select name=next size=8 multiple>
      <option value=0>0
      ...
      <option value=100>100
    </select>
  </span>
</div>

but, alas, it doesn't work like that.

How can I get Code:

<tr>
  <td>label<br>form_control</td>
  <td>label<br>form_control</td>
</tr>

behavior without using tables?

Got a quick question from a newbie. Thanks to a kind member, I've just been assisted in creating my first HTML5/CSS 3.0 page. It has a footer that extends vertically with content.

I have several pages that will be updated that will be changed frequently. In my world of tables, I would simply create an inline frame to display them, and have ease of quick editing. The questions I have are

1) is there a CSS alternative to have mulitlple links display different content in a particular frame or div?

2) With either that alternative OR inline frames, is there a way to make it dynamic, meaning instead of scrolling, it extends downward and pushes the footer down as content grows?

3) if so, how would I accomplish this?

What is the difference between inline styles and id's? Are there places where you should use one and not the other?

Sorry if this has already been answered but I couldn't find anything in a search.

Hi all,

Im hoping someone out there can help me.

Ive just discovered ive made a massive mistake by designing my site and viewing it in IE. It looks fine in IE, but of course there is one part that looks terrible in FF ( not FFs fault i know!)

The navigation bar is an inline list that is supposed to appear tabbed but in FF one of the tabs is pushed up a lot higher and I cant figure out what is pushing it up. i thought it might be the #ul secondary pushing it up (as this appears a bit wonky as well...)and i tried adding /* Hides from IE-mac \*/

#ul secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -41px;
left: 1px;
width: 100%;
}
/* End hide from IE-mac */

but this didnt change anything. i tried using the DOM inspector that comes with firebug but I still cant figure out whats pushing up the one home page tab....

Any tips anyone might have would be greatly appreciated.



My style sheets is




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

2 column container

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#content-container-two-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:728px;
position:relative;
margin-bottom: 50px;
}

#content-main-two-column {
width:728px;
float:left;
}

#content-side-two-column {
float:right;
width:160px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

3 column container

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-container-three-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:728px;


position:relative;
}

#content-main-three-column {
width:355px;
float:left;
margin-left:25px;
}

#items-left {
width:148px;
float:left;
margin-right: 45px;

}

#items-right {
width:148px;
float:right;
margin-right: 45px;

}





#content-side2-three-column,
#content-side1-three-column {
width:150px;
font-size:1.1em;
}



#content-side2-three-column {
float:right;
}

#content-side1-three-column {
float:left;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

index page

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#three-column-container {
background:url(../../images/bg-three-column-home.png) repeat-y;
padding:0;
margin:20px 0 10px 0;
}

#three-column-side1 {
float:left;
width:148px;
margin-right: 45px;
}

#three-column-side2 {
float:right;
width:142px;
background-color: #E9E9E9;
padding-left: 2px;
padding-right: 2px;
}
.centre {
background-position: center;
margin-bottom: 5px;
text-align: center;
padding: 0px;
}


#three-column-side22 {
float:right;
width:148px;
}

#three-column-middle {
width:340px;


margin:0px 10% 0px20%;
margin-right: 10%;
margin-left: 20px;
}


#three-column-middle-air {
width:340px;


margin:0px 10% 0px20%;
margin-right: 10%;
margin-left: 20px;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

html

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body {
margin:0px;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.4em;
color:#666666;
}

p {
margin:10px 0;
}

p.no-padding-no-margin {
padding:0;
margin:0;
}

hr{
color: #E5E5E5;
background-color: #E5E5E5;
height: 1px;
border:0;
margin:15px 0;
_margin:10px 0;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

headings

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


h1, h2, h3, h4, h5, h6 {
font-size:1.8em;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.1em;
margin:5px 0;
}

h1 {
margin-bottom:0;
}

h1, h2 {
margin-top:0px;
}

h2 {
font-size:1.3em;
}

h3 {
font-size:1.1em;
}

h3.small {
font-size:1.2em;
}

h4 {
font-size:1.1em;
}

h5 {
font-size:1.1em;
}

h6 {
font-size:1em;
}


a:link {
color:#d61719;
text-decoration:none;
}

a:visited {
color:#980000;
text-decoration:none;
}

a:hover {
text-decoration:none;
}

a:active {
color:#980000;
}

#content-side-two-column a:link,
#content-side2-three-column a:link,
#content-side1-three-column a:link,
#content-side-two-column a:visited,
#content-side2-three-column a:visited,
#content-side1-three-column a:visited {
text-decoration:none;
}

#content-side-two-column a:hover,
#content-side2-three-column a:hover,
#content-side1-three-column a:hover {
text-decoration:underline;
}



.img_text {

float:left;
margin-top:0px;
margin-right:10px;
margin-bottom:0px;

}




#poster-photo-container {

margin-left:auto;
margin-right:auto;
width:750px;

position:relative;
}

.poster-photo-image {

display:block;

}


ul {
margin:0;
padding:0;
list-style:none;
}

li {
list-style:none;
background:url(../../images/list-bullet-02.gif) no-repeat 0 .8em;
padding:.2em 0 .2em 1em;
margin-left:0.4em;

}



#content-side1-three-column ul.list-of-links,
#content-side2-three-column ul.list-of-links {
margin: 0 0 30px 0px;
}

ul.list-of-links li{

background-image:url(../../images/list-bullet-01-link.gif);
}

ul.list-of-links li.current {
background-color:#E5E5E5;
}


ul.no-lines,
ul.no-lines li {
border:none;
}



.feature-area {
background-color:#6799D1;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

images

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

img {
border:none;

}

.img_footer {
border:none;
padding-right:10px;

}
.photo-border {
padding:0px;
margin-bottom:5px;
display:block;

/*background-image: url(../../images/bg-photo.png);
background-repeat: repeat-x;
background-position: top;*/
}

.photo-float-left {
float:left;
margin-left:0px;
margin-right:10px;
margin-top:0px;
margin-bottom:40px;

}

.photo-float-details {
float:left;
margin-left:0px;
margin-right:10px;
margin-top:0px;
margin-bottom:1px;

}

.image-border-none {
border:none;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

FOOTER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#footer {
margin-top:3px;
margin-left:auto;
margin-right:auto;
width:740px;
padding:.8em 0 1em 10px;
position:relative;
font-size:0.9em;
text-align: center;
}



#footer a:link,
#footer a:visited {
color:#555450;
text-decoration:none;
padding:0px 0px 0px 10px;
}

#footer a:hover {
color:#64645c;
text-decoration:none;
padding:0px 0px 0px 10px;
}

#footer a:active {
color:#FFFFFF;
padding:0px 0px 0px 10px;
}






.arrow {
vertical-align:middle;
}



.clear {
clear:both;
}

.none {
display:none;
}

.dent {
margin-left: 20px;
}



/*Tabs*/


html, body {
margin: 0px;
padding: 0px;
}

body {
text-align: left;
}

#Wrapper {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
width: 750px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#Container {
background-color: #FFFFFF;
color: #333;
clear: both;
margin: 0px;
padding-top: 2.2em;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
width: 750px;
float: left;
border-top: 1px solid #C0C0C0;
display: block;
}




#Content {
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #C0C0C0;
padding-bottom: 20px;
margin: 0px;
width: auto;
height: auto;
}

#Navigation {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color: #333333;
position: relative;
height: 50px;
display: block;
width: auto;
}
ul#primary {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
width: 728px;
}

ul#primary li {
display: inline;
list-style: none;
}

ul#primary a,ul#primary a.active {
width: 10em;
display: block;
float: left;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 12px;
text-decoration: none;
color: #333;
letter-spacing: .1em;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0;
margin-left: 0;
padding-top: 4px;
padding-right: 0;
padding-bottom: 4px;
padding-left: 0;
}




ul#primary a.active,ul#primary a.active:hover {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
background: #ffffff;
color: #333;
margin-top: 0;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
}




ul#primary a {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
background: #e8e9e1;
}

ul#primary a:hover {
margin-top: 1;
border-color: #c0c0c0;
color: #333;
padding-bottom: 3px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
background: #e9eaea;
}
ul#secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -21px;
left: 1px;
width: 100%;
}

/* Hides from IE-mac \*/
#ul secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -41px;
left: 1px;
width: 100%;
}
/* End hide from IE-mac */



ul#secondary li a {
width: auto;
display: block;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right:none;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #FFFFFF;
text-decoration: none;
}

/* Hides from IE-mac \*/
#ul secondary li a {
width: auto;
display: inline;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right:none;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #FFFFFF;
text-decoration: none;
}
/* End hide from IE-mac */

ul#secondary li a:hover {
color: #333;
border-top: none;
border-bottom: none;
border-left: none;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
background: none;
}

ul#secondary li a:active {
color: #000;
font-weight: bold;
}

ul#secondary li:last-child a {
border: none;
}

.bold {

font-weight:bolder;
color:#000000;}


#number {

width:20opx; }



And some of the html

<div id="Wrapper">
<img src="pics/logo2.gif" align="right" />
<div id="Navigation">
<ul id="primary">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="print.html">Printing</a>

<ul id="secondary">
<li><a href="about.html">About us</a></li>
<li><a href="environment.html">Environment</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</li>
<li><a href="products.html">Products</a></li>
<li><a href="cart">View Cart</a>
<li><a href="contact.html">Contact us</a></li> </ul>
</div>
<div id="Container">
<div id="Content">
<div id="poster-photo-container"><img src="pics/header6.jpg" alt="" class="poster-photo-image" /></div>
<div id="content-container-two-column">
<div id="content-main-two-column">
<h1>
Welcome to The Picture Works Printing Room</h1>

Hello,

I am having trouble with the display: inline tag.
********************************************
Here is the style:

H1.nolinebreak
{
font-size : 12pt;
display: inline;
}

Here is an HTML snippet:

<p>
Here is my content text. Blah blah <H1 class="nolinebreak"> inline header 1 </H1> blah blah blah <H1 class="nolinebreak"> inline header 2 </H1>
</p>
********************************

The second and additional instances of the <h1 class="nolinebreak"> works great. But the first one always puts in a line break. I need them all to display inline. What am I doing wrong? Thanks in advance.

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

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

I know that display:inline is supposed to change a Block element to view like an inline element.
I take that to mean that the display:inline will eliminate any added space the Block element has in it. Meaning images and text will butt up against each other, but it's not working the way I expected.

I have a list with images that I want to butt up against each other vertically . These images stack on top each other and to the left.
The list has zero pixels for padding and margins.
In the browsers that 5 pixel line shows up unless I code in a <p> then I adjust the <p> to have no padding or margin.

EX:
Code:

<div id="maincontent">
<ul>             
  <li class="hoodmenu"><p><a href="#"><img src="bu_streetware.jpg" alt="street ware"></a></p></li>
  <li class="hoodmenu"><p><a href="#"><img src="bu_dolls.jpg" alt="womens"></a></p></li>
  <li class="hoodmenu"><p><a href="#"><img src="bu_dudes.jpg" alt="guys"></a></p></li>
  <li class="hoodmenu"><p><a href="#"><img src="bu_beginners.jpg" alt="children"></a></p></li>
</ul>      
</div>

This seems like a hack. I have tried using display;inline but the spaces still appear.
The code validates in 4.01 HTML and in CSS3. I also noticed I don't have to use the <p> in Opera or Safari, but I do for Firefox.

Is this the correct way to handle this problem?
If not, how should I actually write the code?

Thank you!