Jump to content


Photo

Weird linebreak


  • Please log in to reply
3 replies to this topic

#1 mnvdk

mnvdk
  • New Members
  • Pip
  • Newbie
  • 6 posts

Posted 29 September 2006 - 06:56 AM

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:

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

and it's corresponding style:

#a_omos
{
  position: absolute;
  left: 400px;
}
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?[tr][td]


#2 mnvdk

mnvdk
  • New Members
  • Pip
  • Newbie
  • 6 posts

Posted 30 September 2006 - 05:36 PM

Well, I have narrowed it down to the cause of the problem.
Look at this code snippet:
<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>

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
<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>

Why is this so? How can it be?

#3 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 01 October 2006 - 03:43 PM

I agree with you that it is wierd, but try adding this:
white-space: normal;


#4 FrOzeN

FrOzeN
  • Members
  • PipPipPip
  • Advanced Member
  • 70 posts

Posted 01 October 2006 - 05:39 PM

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.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users