Page not aligning correctly

HTML & CSS
1

Hello,

at my page at http://www.meadowlarkco.com/services2.php I did something which made the aligning of the photo and the section to the right of it off…Im thinking maybe I removed a margin setting which shouldn’t have been?

If someone could take a look I’d really appreciate it

thanks

2

There’s an awful lot of code errors in that page, which makes it hard to tell what’s happening. There are also a few CSS errors, including in this section

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: 5A7366;
	color: #FFF;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 100%;
}

Running that through the CSS validator gives

Value Error : background-color Unknown dimension 5A7366

There should be a # at the start of the number i.e. #5A7366. It’s just a thought, but if that is somehow being read as a dimension, that could just be your problem.

3

Yeah, my plan is to finish the page then run throug the errors I’ll take a look at that on the color don’t know how I missed that

I’m still wondering if it’s some kind of margin issue though?

4

The gap at the top of the photo is cause by the default top margin of <p class=“servicescontent”>.

So either…

Create a new CSS rule for .servicescontent and give it margin-top:0

or add margin-top:0 to the existing rule for .splash .splashcondense

or use a CSS reset, such as Eric Meyer’s. Note that his reset is not intended to be applied and forgotten. Take time to understand what it does and tweak for your requirements.

5

I think you might be doing things in the wrong order. For instance, if you look at this block of code

<ul id="MenuBar" class="MenuBarHorizontal">
        <li><a href="http://www.meadowlarkco.com/company.php">Company</a></li>
        <li><a href="http://www.meadowlarkco.com/services2.php">Services</a></li>
        <li><a href="http://www.meadowlarkco.com/customersnew2.php">Customers</a></li>

        <li><a href="http://www.meadowlarkco.com/carriersnew.php">Carriers</a></li>
        <li><a href="http://www.meadowlarkco.com/locations.php">Locations</a></li>
        <li><a href="http://www.meadowlarkco.com/contactus.php">Contact Us</a>
        	<ul>
        	<li><a href="http://www.meadowlarkco.com/sales.php">Sales</a>
            <li><a href="http://www.meadowlarkco.com/CSR.php">CSR</a>

            <li><a href="http://www.meadowlarkco.com/dispatch.php">Dispatch</a>
        	</ul>
        </li>
      </ul>

the closing </li> that should come after “Contact Us” has become displaced and now appears after the closing </ul> of the sub-menu. None of the list items in the sub-menu has a closing </li>. If you sort out all these errors, the layout may fix itself. Worth a try, anyway. :slight_smile:

6

So close out the <li> of contactus before the sub menu items of sales, csr, and dispatch? The close those out as well?

Thanks

7

It should look like this:

<ul id="MenuBar" class="MenuBarHorizontal">
        <li><a href="http://www.meadowlarkco.com/company.php">Company</a></li>
        <li><a href="http://www.meadowlarkco.com/services2.php">Services</a></li>
        <li><a href="http://www.meadowlarkco.com/customersnew2.php">Customers</a></li>

        <li><a href="http://www.meadowlarkco.com/carriersnew.php">Carriers</a></li>
        <li><a href="http://www.meadowlarkco.com/locations.php">Locations</a></li>
        <li><a href="http://www.meadowlarkco.com/contactus.php">Contact Us</a></li>
        	<ul>
        	<li><a href="http://www.meadowlarkco.com/sales.php">Sales</a></li>
            <li><a href="http://www.meadowlarkco.com/CSR.php">CSR</a></li>

            <li><a href="http://www.meadowlarkco.com/dispatch.php">Dispatch</a></li>
        	</ul>
     
      </ul>

Every <li> needs a closing </li>, and they must all be inside the <ul></ul> tags.

Try checking your pages with the W3C Validator to pick up these errors.

8

Thanks for the pointers. I’ll let you know if this resolves the problem, won’t be able to post until Tuesday

9

so if I close my <li> for contact us how does my <ul> for the submenu items for Sales, CSR, and Dispatch know to go underneath the <li> that is why I thought I wouldn’t appear beneath it without the submenu li’s within the content li

10

Techno and Victorinox,

I’ve made the suggested changes and it didn’t affect anything. Any other suggestions which I could try?

11

ok if I give my .splash .splashcondense a -16 px top margin it lines up correctly…but is that schematically correct? From doing this does anyone have other suggestions for what could be the issue?

thanks

12

the image is 400 x 400, so now when I view the page in dreamweaver on my pc with the -16 px top margin there is a gap at the bottom but when I view in a browser on IE or Safari it looks correct ?

13

You seem to have successfully aligned the photo by applying margin-top:-16px to .splash .splashcondense

I suggest you change the value to -1em as this will retain the alignment if text size is adjusted by the user.

Remember that the negative margin is compensating for the margin on the .servicescontent paragraph - so if the font-size of the paragraph (currently set to the default 1em) is changed, then the negative margin of .splash .splashcondense will also need to be adjusted. This is why it may be easier to use margin-top:0 on .servicescontent.

14

I wouldn’t worry too much about how it looks in Dreamweaver. Your site visitors will all be using browsers, so concentrate on how it looks in a browser.

I’m using Firefox, and while your image is now aligned, you still have a couple of other layout issues I can see. The “Contact Us” item on your menu wraps onto a second line and sits over your photo, and the final list items in the right-hand panel spill out from the coloured background images. See attached screen-shot.
The same problems occur in Chromium; I haven’t tested in anything else.

You would be better to set a background colour, rather than rely on images for the background of your lists. If a user has their font size set even slightly larger than yours, the white text will drop onto the pale background and become illegible. If you set a background colour, it will expand as the text block expands.

Those lists also have a coding problem. Where you have this:

<ul>Flatbed
    	<li>B-Train</li>
        <li>Power Only</li>
        <li>Maxi's</li>
    </ul>

you should replace it with something like

<h2>Flatbed</h2>
<ul>
    	<li>B-Train</li>
        <li>Power Only</li>
        <li>Maxi's</li>
    </ul>

The reason for this is that a <ul></ul> cannot contain text directly, only a group of one or more <li></li>. It might seem like nit-picking, but if your markup doesn’t match what the browser is expecting, it will have to “guess” how to interpret and display it - which might not be what you’re expecting. :slight_smile: If you can eliminate these errors, then that’s one less thing to cause problems.

15

ok, I changed my margin-top for splash condense back to -16 px and removed the margin-top for splashcondense services content and now my submenu under Contact Us is gone?

16

this is what I have for for menu which is read in to my page by the below:

<?php include(“menu”); ?>

<ul id=“MenuBar” class=“MenuBarHorizontal”>
<li><a href=“http://www.meadowlarkco.com/company.php”>Company</a></li>
<li><a href=“http://www.meadowlarkco.com/services2.php”>Services</a></li>
<li><a href=“http://www.meadowlarkco.com/customersnew2.php”>Customers</a></li>

    &lt;li&gt;&lt;a href="http://www.meadowlarkco.com/carriersnew.php"&gt;Carriers&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://www.meadowlarkco.com/locations.php"&gt;Locations&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://www.meadowlarkco.com/contactus.php"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
    	&lt;ul&gt;
    	&lt;li&gt;&lt;a href="http://www.meadowlarkco.com/sales.php"&gt;Sales&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="http://www.meadowlarkco.com/CSR.php"&gt;CSR&lt;/a&gt;&lt;/li&gt;

        &lt;li&gt;&lt;a href="http://www.meadowlarkco.com/dispatch.php"&gt;Dispatch&lt;/a&gt;&lt;/li&gt;
    	&lt;/ul&gt;
 
  &lt;/ul&gt;

but the submenu under Contact Us doesn’t show up?

17

To avoid confusion, I’m going to leave this with Technobear. Will keep an eye on the thread.

18

ok, I got it back looking like its supposed to and know that there are some changes which need to be made, could someone let me know what direct changes need to be made to make everything schematically correct so that it will appear as it does now. I’ve looked at it on multiple machines which IE, Chrome, Firefox, and Safari and everything appears ok.

19

Please bear with me on this it’s the first site I’ve designed

20

Oh jings, as we say in these parts.

That’s just as well, thank you.

rrmcguire - I apologise for messing up your Contact sub-menu. I was tired and not paying as much attention as I should have. I browse the internet with javascript disabled, so I didn’t realise you had a drop-down menu. (I should, of course, have spotted that from the mark-up.:blush: ) I’m going to leave well-enough alone there. I’ve never used a javascript drop-down and don’t want to mess it up again. It’s not a good idea to use javascript for something basic to your site, like the navigation, simply because it makes it inaccessible to people like me, who have javascript disabled, and some blind users with screen readers. I believe it’s possible to achieve the same thing with CSS, but I’ve never had cause to use that approach, so you’d need somebody more knowledgeable than I am to help you.

However, you could make one very simple change to the menu layout to prevent the “Contact” tab dropping onto another line, by removing the width setting.

.menu {
	background-repeat: no-repeat;
	height: 60px;
	width: 660px; [COLOR="#FF0000"]<- remove this line[/COLOR]
	padding-top: 0px;
	float: right;

You can also remove background-repeat: no-repeat; from that code block, as it is only needed if you are using a background image.

As I said before, there is quite a lot of invalid code in your site, which can cause problems, but if you’re happy with the way it’s displaying, you might just want to leave it at that. If you want to try to sort that out, or make other changes, such as replacing the green background images with background colours, I’d be happy to help you, but I don’t want to interfere (again). :slight_smile: Those background images are quite large and will add to the page load time, especially on a slow connection. If you prefer to keep the images, then I would recommend converting them from .png to .gif format, which will give you a much smaller file size.

Let us know if you want any more help.