PDA

View Full Version : Div alignment


safesurfer65
04-08-2012, 09:50 AM
Hello all

Hope someone can help. I'm having issues with Div tag alignments. On different browsers my site looks slightly different. The problem being the main content divs and right side bar dont align up with the bottom footer image. Is there any way to lock the divs so they align properly with the bottom footer image with the computer logos. If you look at my site you'll know what I mean. Any help would be much appreciated.

www.banchorypcs.co.uk (http://www.banchorypcs.co.uk)

cheers

Mark

Corrosive
04-09-2012, 08:53 AM
Which particular browsers are you having problems with Mark? Looks good to me in Chrome.

One thing I would say is that using break (<br>) tags to give your words spacing probably isn't that consistent. Perhaps consider something a little more semantic?

For example;

<div class="otherservices2">OTHER SERVICES</div>
<br />
<br />
<div class="otherservices20">- Laptop overheating problems<br />
<br />
- Windows XP/Vista/7 problems<br />
<br />
- Power jack repairs<br />
<br />
- Broken laptop screen hinges<br />
<br />
- Password recovery<br />
<br />
- Software installation
<br />
<br />
- Remote support<br />
<br />

Might be better as;

<h3>OTHER SERVICES</h3>
<ul>
<li>Laptop overheating problems</li>
<li>Windows XP/Vista/7 problems</li>
<li>Power jack repairs</li>
<li>Broken laptop screen hinges</li>
<li>Password recovery</li>
<li>Software installation</li>
<li>Remote support</li>
</ul>

because your services will be in an unordered list. Each list tag can then be styled with CSS to get the right amount of margin/padding to achieve the spacing. That would be much more stable cross-browser.

Hope that helps.

lycialive
04-10-2012, 03:21 AM
I'm using firefox and the last frame toward the bottom was a bit short like you said. I played with it and added a literal height of 97px to the pickup and delivery div. Maybe just compensating for that one div by adding a true height might do it. Of course, across browsers, you never know.

safesurfer65
04-10-2012, 09:23 AM
Hi

Thanks for the help, its appreciated. I normally use the design mode but Im starting to use the code tab a lot more. Your right in saying the page breaks are causing inconsistent results in different browsers. I may have to go back and redesign my site from scratch as the code is very messy. I've now noticed when I go to "laptop screen repair" page the whole page moves to the right in IE and Chrome. Had a look through the code and cant find whats causing it. Any ideas ? Thanks again for your kind help.

cheers

Mark

Corrosive
04-10-2012, 09:30 AM
That page moves to the right because the scroll bar disappears as it is not needed. The page is shorter than the length of the screen :)

That shifts it about 10 pixels right.

safesurfer65
04-10-2012, 10:56 AM
That page moves to the right because the scroll bar disappears as it is not needed. The page is shorter than the length of the screen :)

That shifts it about 10 pixels right.

Now why didn't I notice that. Thanks Corrosive

Corrosive
04-11-2012, 12:59 PM
Now why didn't I notice that. Thanks Corrosive

It gets a bit 'wood for the trees' sometimes when putting a site together! And you are welcome :)

Ricky55
04-11-2012, 10:39 PM
Sound advice that. At the end of the day its a list of services so it should be placed in a list.

I'd also remove the capitals from Other Services, you can always style this to be uppercase using CSS.

h3 {text-transform:uppercase;}