CSS alignment

toastyman

toastyman

toastyman

Associate
Joined
30 Dec 2005
Posts
415
Ok having a real pain of a problem, and I bet there's a really simple solution to this...

Basically, I've got a div which contains some images, and when you move the mouse over each one, it updates some text in another div. However, this div won't stay inline with the first one for some odd reason. I want the text div to go to the right of the images in the blue space provided...

http://www.ppdrmanagement.com/

I've outlined the two divs in question with black borders (on the right hand side), so you can see whats what.

If anyone has any ideas/fixes for this problem, i'd really appreciate a fast reply.

Cheers,

Rich
 
Check your margins for your images and the divs in question. Are they floated?
Can we see the CSS?
The width in IE might be different to Firefox or Opera so you need to test in multiple browsers and compare.
Theres a few things it could be at the moment.
 
This is the section in question:

Code: 
<td colspan="2" class="horzheadsplit" style="background-image: url(/images/loginbg.gif); text-align:left">

<div style="position:relative; left:8px; top:1px; width:119px; display:inline; height:33px; border:solid 1px black">
<a href="" onmouseover="qtext('<p>Previous page</p>')" onMouseOut="qtext('<p>&nbsp;</p>')"><img src="/images/qmback.jpg" alt="Return to the last page you were viewing" style="width:39px; height:33px; border:none; vertical-align:middle"></a><a href="http://www.ppdrmanagement.com:2095" onMouseOver="qtext('<p>Check your email</p>')" onmouseout="qtext('<p>&nbsp;</p>')"><img src="/images/qmmail.jpg" alt="Check your email" style="width:43px; height:33px; border:none; vertical-align:middle"></a><a href="/sitemap/" onMouseOver="qtext('<p>View the sitemap</p>')" onMouseOut="qtext('<p>&nbsp;</p>')"><img src="/images/qmsearch.jpg" alt="View the Sitemap" style="width:37px; height:33px; border:none; vertical-align:middle"></a>
</div>
<div id="qmenu" style="display:inline; height:33px; width:20px; border:solid 1px black"><p>&nbsp;</p></div>

</td>

The div "qmenu" is the one which contains the text. You can see this at www.ppdrmanagement.com under the main menu on the right hand side.
 
hmmm I would do away with the tables.
Id have a div which contained the 2 divs you are using like so:

Code: 
<div id="container">
      <div id="buttonsdiv">
            <a href="" id="button 1"></a>
            <a href="" id="button 2"></a>
            <a href="" id="button 3"></a>
      </div>
      <div id="qmenu">
            all your Javascript etc
      </div>
  </div>

And all the fomatting would be done in your external CSS file.
Basically, IE and FF can display things quite differently and it takes a while of playing around in the CSS to get them to align, especially with margins and borders.
Its possible a hack would be needed although I can normally get round it.

Because its quite a tightly controlled part of your layout its best to be quite methodical in how you tackle the problem and separate the content and presentation totally if possible.
 
I would convert the layout to divs, but the problem i'm having at the moment is a serious lack of time... also, I wouldn't be paid for the extra work.

Guess its down to a CSS hack
 
Ok i've read up on the box model hack, but i'm not seeing how its going to help. Here is the CSS of the two divs, all I want is for them to sit next to each other:

Code: 
#qmenub { position:relative; left:8px; top:1px; width:119px; display:inline; height:33px; border:solid 1px black;}
#qmenu p { display:inline; height:33px; width:20px; border:solid 1px black; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:9px;}
 
I think they arent sitting next to eachother because they are being given slightly different widths in IE - hence they are too wide to sit in the box so one is being pushed down.
The box model hack allows you to change a property for IE only - width, padding etc. So for IE, you'll specify a slightly narrower width (or padding or margin) so the boxes can sit side by side :)
 
It's not a box-model problem, that's exclusive to IE5 [and IE6 in quirks-mode, which it isn't in here], and hence the box-model hack applies to IE5.

Replace those two rules above with:
Code: 
#qmenub {
float: left;
position: relative;
bottom: 3px;
left: 5px;
width: 119px;
height: 33px;}

#qmenu {
float: right;
position: relative;
bottom: 3px;
width: 100px;
height: 33px;}

#qmenu p {
position: absolute;
top: 10px;
left: 8px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 9px;}

I haven't refined that code, but it should work in IE6 and Fx/Gecko. You might like to refine it, along with all those tables you've used for layout ;). Tables are for data, not positioning. And additionally XHTML 1.1 should not be sent as text/html.
 
Yay it finally works :D

Cheers Augmented, D4ve and Al Vallario.

I recently found out that XHTML 1.1 shouldn't be sent in text/html and only in xml/html so am going to change that back to 1.0. As for the tables, well I wouldn't get paid to put them into divs, as the company is seeing no difference in the design, so they wouldn't be willing to pay me for it.

I'll probably just wait for the next redesign of the site due in the summer.

Cheers all.
 
toastyman said:
As for the tables, well I wouldn't get paid to put them into divs, as the company is seeing no difference in the design, so they wouldn't be willing to pay me for it.
Click to expand...
Ah, I see, just a update and re-jig then.

The choice to not use tables, create valid and accessible code shouldn't be dictated by whether you're paid to do it or not, it should simply be what your work is as a professional web developer. If you're stuck inside someone else's codebase on a strict time and financial budget, then, yeah, unfortunately one has little choice but to do the best possible with the resources provided :).
 
As soon as I get some free time (haven't actually had any for ages now!), I will redo the page into divs etc. Atm the company is still setting up, so i'm concentrating all my efforts on the backend of things...building a helpdesk, sorting out server moves to dual opteron machines, keeping clients happy etc :)

One day!
 
You must log in or register to reply here.
Back
Top Bottom