CSS help

[TheEarthWillShake]

I have a css box and I'm trying to figure out how to have text on the left and right.

It should look like

[left side] Comment [far right side] Comment History

http://i302.photobucket.com/al...EarthWillShake/css.jpg

But the comment history is one step down.

HTML
************
<div id="comment-box">

<div id="comment-header">
Comments<div id="comment-history">Comment History</div>
</div>


(JUST TEXT HERE) jflkdsjalkfjdsalkfjlkdsajflkdsajlfkdsjafjldsajflkdsajflds
</div>
************
CSS
************
#comment-box {
border: 1px solid #000000;
}

#comment-header {
margin: 0 0 0 0;
background: #666666;
}

#comment-history
{
text-align: right;
}


Thanks!

 

[QED]

I'm at work at can't see the image you posted... but my belief is that you are using CSS to accomplish what an HTML table is made for.

If you really want two boxes of text to appear on the same line, you need to place them in their own cells within a table row, within a table. You can
still use CSS to control the layout of the text within each table cell.

 

[TheEarthWillShake]

Thanks I used tables. I figured I should try to make it pure CSS.

 

[Chosonman]

try
<style>
#container { width: 300px; }
#left-column { float: left; }
#right-column { float: right; }
</style>

<div id="container">
<div id = "left-column">comment</div>
<div id = "right-column">comment</div>
</div>

 

[Chosonman]

I fixed some spelling mistakes. It should work now.

 

[Woosta]

Chosonman, you forgot to contain the float via overflow:hidden, so any elements coming afterward will respect the dimensions of the container element. The width triggers hasLayout in IE6/IE7 so no need to worry about IE. Although if you're offsetting elements beyond 300 px width they'll obviously be hidden, then you'd need to use clearfix. By the way, you should most of the time, if not always, set dimensions on floated elements, as browser engines have inconsistent behavior when calculating the width, some shrinkwrap, some more than shrinkwrap, ugh. Also, choose more semantic names than left and right. If you're using embedded CSS, specify the media type of screen or it might target other media types.

 

[TheEarthWillShake]

Agh I'd like to say that CSS is the most frustrating language I have ever dealt with. I get something to work in IE6 and firefox flips out, then I get something to work in firefox and IE6 flips out, I wish the corporate environment swithced to IE7, that's supposed to be easier to program for right?

 

[Woosta]

The most standards compliant browsers are Safari 3, Opera 9.5, Konqueror. Then come Firefox 3, Firefox 2, and then Netscape 8, IE7 and lastly IE6. IE7 is still years behind, and there are still numerous bugs that have yet to be fixed in regards to the rendering engine. The Trident engine on IE7 still has hasLayout, which should be abolished in IE8. In other words, its still a piece of sh!t but yes, its better than IE6.

 

[ChristianV]

Originally posted by: TheEarthWillShake
Agh I'd like to say that CSS is the most frustrating language I have ever dealt with. I get something to work in IE6 and firefox flips out, then I get something to work in firefox and IE6 flips out, I wish the corporate environment swithced to IE7, that's supposed to be easier to program for right?

yeah, Ie7 does behave much better than IE6, but Firefox' CSS implementation is still better, although IE8 should have a very good CSS support, as it passed the newest Acid test.

 

[Woosta]

Ugh. A dramatic upgrade to IE's rendering engine is WAY overdue, and there's not really a good reason to get all excited because the market share is still.. id say 80% IE6/IE7, 20% other, IE6 probably nearly 60%

It's not like IE8 is going to come out overnight and be on everyone's computer, so that you can freely ignore IE6 and IE7. If you run a site where users aren't in the nerd/IT demographic, then you'll still have to support 6 and 7 for years to come.

 

[ChristianV]

well, I didn't claim so
I just wanted to add, that microsoft claims it's getting better with their compatibility

 

[Chosonman]

Originally posted by: Woosta
Chosonman, you forgot to contain the float via overflow:hidden, so any elements coming afterward will respect the dimensions of the container element. The width triggers hasLayout in IE6/IE7 so no need to worry about IE. Although if you're offsetting elements beyond 300 px width they'll obviously be hidden, then you'd need to use clearfix. By the way, you should most of the time, if not always, set dimensions on floated elements, as browser engines have inconsistent behavior when calculating the width, some shrinkwrap, some more than shrinkwrap, ugh. Also, choose more semantic names than left and right. If you're using embedded CSS, specify the media type of screen or it might target other media types.

Good points. I wish there were some resources I could find to help me out with my own CSS nightmares when I'm doing front end work. I mostly deal with Java but I've been thrown front end work now and then.

 

[TheEarthWillShake]

Is it normal to spend hours trying to do CSS for simple crap? I feel like I'm wasting time on this lol.

I have one issue but I can't post the code yet, I will on Monday.

In IE6 is does it right.

Name 1: NAME
Name 2: NAME
Name 3: NAME

in firefox it's

NAME1: NAME

NAME2: NAME

NAME3: NAME

I did this in a table too..

 

[TheEarthWillShake]

Here is my table. The who point of it is to have the class projPeople to have blue letters for the person's rank. Internet Explorer 6 looks right but firefox has spaces like in the post above.

<div id="side-b">
<table>
<tr>
<td><p class="projPeople">Executive Sponsor</p></td>
<td><asp:Label ID="lblProjExec" runat="server" Text="lblProjExec"></asp:Label></td>
</tr>
<tr>
<td><p class="projPeople">Project Director</p></td>
<td><asp:Label ID="lblProjDirector" runat="server" Text="lblProjDirector"></asp:Label></td>
</tr>
<tr>
<td><p class="projPeople">Project Owner</p></td>
<td><asp:Label ID="lblProjOwner" runat="server" Text="lblProjOwner"></asp:Label></td>
</tr>
</table>
</div>

CSS..

.projPeople {
color: #3366FF;
}

#side-b {
margin: 0;
float: left;
width: 275px;
height: 1%; /* Holly hack for Peekaboo Bug */

}

 

[Chosonman]

Add this to the head of your html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

IE and Firefox read margins and padding slightly different. This should solve that problem.

 

[TheEarthWillShake]

Thanks but those seem to be already established at the top of my page. I even pasted them in and nothing different happened.

Does using p class do something different?

If I remove it the text displays right but obviously the color is gone as well.

 

[QED]

Originally posted by: TheEarthWillShake
Thanks but those seem to be already established at the top of my page. I even pasted them in and nothing different happened.

Does using p class do something different?

If I remove it the text displays right but obviously the color is gone as well.

Why are you using <p> at all?

I'm guessing that Firefox is forcing some space around that tag, since it's meant to act as a paragraph seperator. Just use a <div> tag instead, or just assign the <td> tag to the appropriate class.

 

[Chosonman]

Try adding this:

p {margin:0; padding:0;}

 

[QED]

Originally posted by: Chosonman
Try adding this:

p {margin:0; padding:0;}

Yep, that will probably work as well. But it begs the question: if you want don't want your paragraph tag to have any padding or margin, then why are you using the paragraph tag in the first place?

 

[TheEarthWillShake]

Thanks Chosonman, that worked. I guess I didn't see that this was the same as a paragraph tag. I figured it was another meaning.

 

[jjones]

If you're just using a tag to call out a color, rather than using a <p> or even a <div> tag, you should be using a <span> tag. The <span> is inline, has no margin or padding, and is specifically for that kind of use.

Even further, I might consider doing away with the wrapper altogether and place the class in the <td> tag, but that would depend upon what I was doing with the rest of the table.

 

[Woosta]

Originally posted by: QED

Originally posted by: Chosonman
Try adding this:

p {margin:0; padding:0;}

Yep, that will probably work as well. But it begs the question: if you want don't want your paragraph tag to have any padding or margin, then why are you using the paragraph tag in the first place?

Obviously for a semantic purpose. The setting of 0 for the margin and padding properties is usually set on the universal selector (if you have lots of experience and you're really anal - youd use reset.css) so everything gets down to 0, and you can consistently set bottom margins (usually) on block level elements such as paragraphs.