little issue with positioning

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Mr. T - 28 Aug 2007 16:06 GMT

Hi all,

been messing around but can't seem to find what's causing my problem.

If in IE 7 i look at the page http://www.techtransfer.ugent.be/joomlatt/ it
looks fine and as it should (that is: the dotted line on top of the left
hand menu and the dotted line under the title on the right hand side are at
the same height).

However, when i look at that page in firefox, everything is shifted and not
positioned well at all.

I've been messing around with paddings and margins, but i can't seem to get
it right.

Also another small issue is that the text in the right hand side should be
the same size as the text in the left hand menu, but even with all
font-sizes being set equal it doens't seem to work.

Anyone have an idea what i might be missing or overlooking?

Thx in advance!

Regards,

Thomas L.

Reply to this Message

John Hosking - 29 Aug 2007 02:23 GMT

> Hi all,
>
[quoted text clipped - 4 lines]
> hand menu and the dotted line under the title on the right hand side are at
> the same height).

Except for the apparent fact that IE7 happens (*/happens/) to display it
the way you want it, what makes you think any browser should produce
results where the lines line up? They're both graphics, completely
separate and dissimilar, arranged in a markup structure which differs on
each side. I think it's just a fluke that they do line up in IE7. So:
what (else) makes you think they're supposed to?

> However, when i look at that page in firefox, everything is shifted and not
> positioned well at all.
>
> I've been messing around with paddings and margins, but i can't seem to get
> it right.

Sorry; when I see the divs nested six deep, I sort of lose interest in
tracinbg through your code to debug it. In fact, it looks like many of
the divs are empty and unclassed, and therefore serve no purpose but to
obscure your code. What does this do for us?
<div class="module">
<div>
<div>
<div>
</div>
</div>
</div>
</div>

Also, I see validation errors in your code. There are more in the markup
than in the CSS, but the CSS errors look like they might be relevant to
your problem (some vertical-align problem).

> Also another small issue is that the text in the right hand side should be
> the same size as the text in the left hand menu, but even with all
> font-sizes being set equal it doens't seem to work.

Well, even without paging through your CSS, I see that you've got
body { font:62.5% } and
a.leftsubmenu, a.mainlevelsubmenu { font-size:1.1em; }

If you want the font sizes to be the same, why set them differently?

BTW: the 62.5% is bad enough on its own, but it's for gray text
(color:#909090). I guess that's so nobody can read the text...?

My advice: remove the extraneous markup, validate what's left, the
reduce a copy of that to exhibit the "problem" with the simplest
possible code. If you can't see the problem by yourself from that, come
back again with a new URL. But I'm still not convinced it's a problem,
because you seem to just be wishing some graphics will happen to align.

Signature

John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

Reply to this Message

Steve Swift - 29 Aug 2007 07:00 GMT

> BTW: the 62.5% is bad enough on its own, but it's for gray text
> (color:#909090). I guess that's so nobody can read the text...?

Funnily enough I recently received a printed invoice (as a result of a
web purchase) and thought that it looked very pleasant indeed. I
scrutinised it to see what was causing this effect and it was that the
main titles were in a grey shade. Admittedly it was a considerably
darker shade of pale than #909090 - almost, but not quite
indistinguishable from black.

I presume that such "colouring" can easily be achieved on an otherwise
black/white laser printer. At the very least it would consume only your
black ink on a 4-colour printer, and this is usually cheaper.

Signature

Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

Reply to this Message

John Hosking - 29 Aug 2007 07:17 GMT

>> BTW: the 62.5% is bad enough on its own, but it's for gray text
>> (color:#909090). I guess that's so nobody can read the text...?
[quoted text clipped - 3 lines]
> scrutinised it to see what was causing this effect and it was that the
> main titles were in a grey shade.

I'm sure the experience of receiving an invoice can be more pleasant
when you can't see the numbers. ;-)

Total you owe:

Signature

John

0

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2007

little issue with positioning