Jump to content

Archived

This topic is now archived and is closed to further replies.

mnvdk

Weird linebreak

Recommended Posts

I was actually not quite sure where to put this, due to the fact that I have no idea what is causing my problem.

My problem is, as folllows:

I have a menu looking like this:

[code]
echo('<a id="a_omos" href="'.$_SERVER['PHP_SELF'].'?side=omos" target="side">Om os</a>');
[/code]

and it's corresponding style:

[code]
#a_omos
{
  position: absolute;
  left: 400px;
}
[/code]
My problem is, that for some reason, it creates a linebreak between 'Om' and 'os', which is quite annnoying, and I really don't know what could cause this... Anyone experienced anything similar?[table][tr][td][/table]

Share this post


Link to post
Share on other sites
Well, I have narrowed it down to the cause of the problem.
Look at this code snippet:
[code]
<html>

<head>

<style type="text/css">

#menu
{
 
}
#a_omos
{
  position: absolute;
  left: 400px;
}

</style>

</head>

<body>

<div id="menu">
<a id="a_omos" href="omos.htm" target="side">Om

os</a>
</div>

</body>

</html>
[/code]

It will output the wanted result. But just by adding a position: absolute; to the #menu style, it will make linebreak whenever there is a whitespace.

Like this
[code]
<html>

<head>

<style type="text/css">

#menu
{
  position: absolute;
}
#a_omos
{
  position: absolute;
  left: 400px;
}

</style>

</head>

<body>

<div id="menu">
<a id="a_omos" href="omos.htm" target="side">Om

os</a>
</div>

</body>

</html>
[/code]

Why is this so? How can it be?

Share this post


Link to post
Share on other sites
I agree with you that it is wierd, but try adding this: [code]white-space: normal;[/code]

Share this post


Link to post
Share on other sites
For some reason the "position: absolute" is causing the <div> to no longer attain it's usual "width: 100%" setting. Thus, the menu div is being squashed to 0% forcing a_omos to undergo word wrap.

Add "div {width: 100%;}" to fix the problem, or a width larger enough to avoid word wrapping. You might have to put it in a class/style if it effects the rest of your page.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.