Just cant tame the logo :-(

HTML & CSS
1

Good afternoon from incredibly hot & sunny 22 degrees C Wakefiled UK :slight_smile:

Ok here goes…
On this page the footer is giving me some stick:
http://www.pauserefreshment.co.uk/eastridingsshop.html
Specifically I want to lower the position of the smiley face logo or lift the height of the one line of text .

Ultimately all i want to do is get the one line of text and the image not to sit on the same height shown as a dashed red line in the above screen grab. I want the one line of text to run slightly higher and not be stuck on the same position as the logo so the line of text is aligned with the middle of the logo.

Ive tried lots of things but no luck :frowning: Heres the offending CSS…
#footer_er {
background:#FFFFFF ;
text-align: left;
padding: 10px;
}

#footer_er p {
font-size:13px;
color:#D68126;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}

#footer_er .shuntimage {
margin-left:60px;
}

Any insights welcome :slight_smile:

2

Thank you death shadow for your candid feedback…

Is this an improvement?
http://www.pauserefreshment.co.uk/eastridingsshop.html

3

Well, the white text on the orange background is illegible, the form is still fixed metric fonts, the dynamic fonts above that are fist-sized, and the lack of left/right padding making the justified text ride up to the edges looks bad too.

It’s still wasting a table on a simple form, the form still lacks proper fields like LEGEND, FIELDSET and LABEL, so there’s still a decent amount wrong with it IMHO…

Though it’s WAY less broken than it was.

4

Hi, I opened the page in IE6/7/FF, and I don’t notice a big difference between them? Do you still need something fixed? I am probably missing something :slight_smile:

5

500Ă—519 63.9 KB

Yes Indead this page http://www.pauserefreshment.co.uk/eastridingsshop.html is a train wreck specifically in IE, I just cant get it to look how I want it to look as in the the picture 1 screen grab above.

So If anyone out there can offer a css solution to get this e flyer looking as it does in firefox as in the second screen grab we might be able to get this train back on track :wink:

Any insights welcome

6

  1. absolute TRAIN WRECK in opera.

  2. improperly structured form, you need a block level container for ALL form elements. Specifically “fieldset”.

  3. Table for nothing. You should NOT be using a table there.

  4. Text in the images in an illegible script - seriously, can anyone actually READ that?!? Oh noes, you might not get your fancy font - screw that, get that text in there as TEXT.

  5. excess div, inlined presentation - it’s a train wreck.

Though, is this supposed to be for a spam flyer instead of a real website? Might explain the outdated/outmoded markup.

7


Thanx Rusty it worked but…

There is a minor problem. In IE version 8 the footer text disappears when the page loads. It only appears when the bottom of the viewport touches where the text need to be. Some sort of bug perhaps?

Ive done a screen grab above to show you how the page loads but as I say mysteriously it appears when the you grab the vertical scroll bar and move the page up & down, totally strange.

Any insights welcome :slight_smile:

8

Something like this? I used inline styles so you could see what I was adding/removing.


<img src="images/eastriding/pause_logo_2.1.jpg" style="float:right">
<p style="margin-top:20px;">
    Unit 3, 128 Thornes Lane, Wakefield, WF2 7RE. TEL: 01924 363091
</p>
<div style="clear:both"></div>
9

problem solved :slight_smile: The offending bit of code is this:
#footer_er {
background:#FFFFFF;
text-align: left;
padding: 10px;
}

Specifically the “padding: 10px;” snippet needs to be removed then its fixed :slight_smile: