Css problem

HTML & CSS
1

At the link below:
http://www.articlecon.com/invoice/
I have two prblems in the css/html

  1. In the left and right boxes, i want the text written after a Name: etc to
    start in the same line. also if the text becomes too long for one line, the next line to start not under the Name: but after it. I mean that it should leave a left margin equal to the width of its label when it goes on to the next line.

  2. In the Amount section, with pink bars, right floated texts have gone down, out of sight. why?

I hope i have made the questions clear. any help please?

Thanx

2

Hi

Looking at your right box, it looks like you want a definition list: a key or name sits on the left, and the definition/value/meaning sits on the right.

Does this look a bit like what you’re after? The left side are very very wide here, but you could take that code and make it smaller. Scroll down to Opmerkingen with all the capital text: it stays in line instead of wrapping under the word Opmerkingen.


<dl>
  <dt>Automatische incasso:</dt>
    <dd>Ja</dd>	
  <dt>Premie per maand:</dt>
    <dd>€ 54.88</dd>
  <dt>Opmerkingen:</dt>
    <dd>DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST! DIT IS EEN TEST!</dd>
</dl>

I floated the dt’s, and left the dd’s unfloated but instead gave them a left margin that was a bit bigger than the width of the floated dt’s.

If the left side will have a different width per box, that’s what id’s or classes are for.

  1. In the Amount section, with pink bars, right floated texts have gone down, out of sight. why?

In which browser?

To me, that is also a definition list: it is a list if key-value pairs. The text on the left has some relationship with the text on the right. If there were more than two columns, it would be a data table.
Look at this example subtotal list.
You could argue that a header and the text that comes after it has a similar relationship, and you’d be right, but this still looks to me much more like a definition list.

3

It recognizes PNGs though png alpha transparency support is not supported.

You could either

  1. Try a pngfix (google twinhelix)
  2. Live with it
  3. Feed IE6 gifs (gifs have 1bit transparency apposed to png 256bit)

:slight_smile:

4

doesn’t ie6 recognize png’s?

5

This page:
http://www.articlecon.com/invoice/
does not show well in ie6 and below. for ie7+ie8 it is fine.

what css modifications would i need, please?

6

I think browsers embolden dt’s by default. As Ryan said, you can override it if you target the dt’s (not the dl’s).

I would feel safer putting a width on floated dt’s.

Also, something to be aware of: the left margin on the dd’s works because it’s 70px left of the container… however, if you trigger Haslayout on the dd’s then IE will start that margin after the floated dt! So keep that in mind.

7

I did that. But somehow it didn’t make the font normal.
I applied font-weight:normal to dt.

8

The dl text is showing up bold.
How do i make it regular?

9

font-weight:normal should do the trick (untested but it should reset anything that is going on there) :slight_smile:

10

Here is what i have to make.
I have updated my site with your given code. It worked!

11

I’m merely the messenger Stomme :slight_smile:

There are many different ways the OP could achieve what he desires ;).

12

Hi,

  1. Got a quick visual image you could mockup real fast so I could see what you want? This should be easily achievable via text-indent but I’d like to know what you want before I get an example :slight_smile:
  2. You set the floated elemnts in the HTML after the inline text nodes and IE needs them first. Readjust your HTML as so
<div class="amount">
            <h3><span>${Amount!}</span>Amount:</h3>
            <h3 class="bg_none"><span>${tax!}</span>Tax:</h3>
            <h3 class="bold"><span>${Totalamount!}</span>Total Amout Due:</h3>
            </div>

Hope that helps :slight_smile:

13

Erm, that would make little logical sense though.

Read that in anything without CSS.

But Ryan’s right on the reason… the text node is taking up 100% of the space, so the floated span is coming afterwards, and therefore underneath.

I’d still go with a dl, or at the very least, two different, non-nested tags.

14

I am checking ie7.

15

Actually, re the png’s, the background of the page is white. So I don’t see the point in making the file bigger for transparency. What’s wrong with a png with a white background? Save the original file in layers on your local machine if you would later also need to make other colour backgrounds, but for the web, keep it simple.

If it was something you just couldn’t live without, though, just make sure white #fff is the background colour in your editor when you save the PNG. My copy of IE6 tends to show whatever background the image was saved with, even though the background is transparent. You can see your image’s saved backgrounds with a tool like ImageMagick, where it’ll list it under -verbose.

If by header boxes you mean the h2’s on that page you just linked, I noticed that the box you have them in (the div) is set to display: inline-block. IE6 has issues with inline-block on boxes who normally by default are blocks. While you could fix that part by afterwards saying

  • html .box_left {display: inline;}
    IE6 also has trouble when the new inline-block box has block children.

I’d just float the suckers instead. They’re a fixed width, and the only IE6 bug I can think of that would really hit you there would be double-margin float bug, which is fixed by stating display: inline in the same section you’re doing float: left.

The box with account summary would not be floated and would clear the floats above it.

16

I see.
I shall try gif’s instead of “living with it”. :slight_smile:

Please could you help with ie6 problem too?
there is some misplacement of the rectangular header boxes. they either come down or are cut off from the top.