By spasebar on

I have tried doing a search for this and playing with the CSS but I cannot for the life of me figure out what is wrong.

My site is midwestrefreshment dot com in IE7 it looks just fine, but in Firefox, the items with the bullets move below the image.

I can't track where in the CSS is making this happen. Can someone please help? Thank you.

⋅ Categories: Drupal 5.x

Comments

dman’s picture

dman commented

The usual story...
Invalid code
There's nothing wrong with using old-fashioned HTML attributes as long as you stop claiming your page is XHTML-STRICT so choose a doctype and stick to it.

The validation may not be your actual woes though, (invalid attributes are not usually destructive to your layout) so get firebug for firefox if you want to learn about web development.
Basically, you have a paragraph, and another paragraph, then your list (in a table instead of a UL??). They are block-level elements, so, without any floats, they go one after another. Which is what you see.
You've tried to put a float on the image, but it's inside a P which is NOT floated, so the P box around that is still a big, page-sized box.
Either shift the img outside the block-level p, or float the P.

If IE is showing it right, it probably realized you were NOT really using XHTML (due to the presence of invalid markup) and fell back to quirks-mode rendering. FF is probably taking you at your word, and imposing the box-layout rules that you claimed to be following.

.dan. is the New Zealand Drupal Developer working on Government Web Standards

spasebar’s picture

spasebar commented

Hello. Umm, I am new to this so I don't know what that means. I do have Web Developer tool bar installed.

I'm using the Ubiquity Theme for version 5.x. Where do I add the float in the CSS? Or is that even the right thing to do?

dman’s picture

dman commented

Your code looks like this:

<span style="color: #3366ff">Welcome to Midwest Refreshment Service</span></h2><p>&nbsp;</p>
<p><img src="/images/coffee_l.jpg" hspace="7" align="left" /></p>
<p>Midwest Refreshment Service provides a complete food vending and office coffee service. Our services include:</p>
<table border="0" width="245" height="310">
    <tbody>
        <tr>

            <td>
            <ul>
                <li>Full line coin-operated vending machine service</li>
            </ul>
            </td>
        </tr>

That's not from the theme, it's from a non-compliant HTML editor. I'm guessing you are using a WYSIWYG of some sort. Well, it's not doing a technically XHTML-STRICT correct job.
Not sure what more to say - it needs some HTML fixing by hand, or you learn to work within the limitations of your chosen editor, and maybe not get the drag&drop layout you expected. There are reasonably easy fixes, which I described above, but it requires some understanding of HTML or CSS.

.dan. is the New Zealand Drupal Developer working on Government Web Standards

spasebar’s picture

spasebar commented

I'm just using the FCKEditor. I put them into a table because I couldn't figure out how to put make the bullets indent properly. Whenever I use the list, the bullet image stay right next to the right of the image.

I understand HTML and CSS. Guess not good enough though!! How do I fix it???? Please help me. :(