[mrsminkie]

Hi,

I'm trying to get a wide banner to centre and hide the overflow. I have managed to do this, and in google on my laptop it looked fine. However, other people have opened the page and the banner is showing in the header and is left aligned.

This is my first post on here and I'm a very new into the world of website design. I have been on browser shots and most of the screenshots have come back with the banner in the header.

What do I need to post for someone to be able to help me?

Many thanks

Lorraine

[Faevilangel]

post a link to the website

Your problem is probably browsers displaying the website differently.

Browser A may display it properly as it's standards compliant, where Browser B won't cos it's outdated.

[NeRo]

mrsminkie, on 23 December 2009 - 03:04 PM, said:

What do I need to post for someone to be able to help me?

Post a link to your live website, then we can see the problem and pick up the html & css

[mrsminkie]

Thanks.

The URL is http://www.loanresol.../index_new.html

The top should be white - where the logo and menu is. But for some reason on all the browser shots there is a banner in the background. I'm viewing on IE and looks fine to me and properly spaced out. But a friend viewed using IE and it looked terrible.

[Faevilangel]

mrsminkie, on 23 December 2009 - 03:30 PM, said:

Thanks.

The URL is http://www.loanresol.../index_new.html

The top should be white - where the logo and menu is. But for some reason on all the browser shots there is a banner in the background. I'm viewing on IE and looks fine to me and properly spaced out. But a friend viewed using IE and it looked terrible.

displays fine in ie7, looks awful in firefox

gimme 5 mins and will look at the code

[Faevilangel]

remove this from the html at the top

<style type="text/css">
<!--
body {
	background-image: url(main_area.gif);
	background-repeat: no-repeat;
}
-->
</style>

[Seth]

firefox your graphics are WAY TOO BIG. try doing a conditional statement

<!--ifIE--> (not sure if i'm writing that correctly)
link to ie stylesheet
<!--end ifIE-->

That way if it looks good in IE you can keep it that way and mess with the css for Firefox et al.

[mrsminkie]

Hi,

How did that image get in there?? I have removed the gif within the html code. Can you have another look at it?

My images are too big? Do you mean in measurement size or file size?

Many thanks

Lorraine

[NeRo]

You're also losing some of your text in the footer (IE8 FF3.5)

[Faevilangel]

NeRo, on 23 December 2009 - 04:04 PM, said:

You're also losing some of your text in the footer (IE8 FF3.5)

Noticed that too

[mrsminkie]

Am I trying to be too clever? I just had a screen dump sent by someone and the titles are going out of line too.

This is my first attempt at CSS. My previous website (don't shout at me!) was done entirely in photoshop. I know the countless reasons why this is not a good idea. So I have spent a bit of time recently looking at tutorials and getting my head around it.

Any suggestions to clean thing up?

[Faevilangel]

mrsminkie, on 23 December 2009 - 04:22 PM, said:

Am I trying to be too clever? I just had a screen dump sent by someone and the titles are going out of line too.

This is my first attempt at CSS. My previous website (don't shout at me!) was done entirely in photoshop. I know the countless reasons why this is not a good idea. So I have spent a bit of time recently looking at tutorials and getting my head around it.

Any suggestions to clean thing up?

run the website through http://validator.w3.org

The websit is really nice but does need some work to clean it up and make it readable.

You have the footer height set to 100px, remove that.

Add the following just before the end div of the footer.

<br class="clear" />

In the css add

.clear { clear:both; } 

[mrsminkie]

Thank you.

I tried the validator and it had a problem with border=0 in my html code. No idea why. I think it threw up about 6 errors. CSS was more I belive but it does need tidying up. There's probably stuff in there that I need to delete - it's been a bit of a self-tutorial this website.

I will amend the footer height, thanks

Any idea why my titles (which are images - the h2 headers are indented off the page) are mis-aligning on some browsers?

[DanL]

mrsminkie, on 23 December 2009 - 04:53 PM, said:

I tried the validator and it had a problem with border=0 in my html code. No idea why.

It's because you've declared a Strict Doctype. Try Transitional XHTML if you need to add inline styling like this.

[Faevilangel]

mrsminkie, on 23 December 2009 - 04:53 PM, said:

Thank you.

I tried the validator and it had a problem with border=0 in my html code. No idea why. I think it threw up about 6 errors. CSS was more I belive but it does need tidying up. There's probably stuff in there that I need to delete - it's been a bit of a self-tutorial this website.

I will amend the footer height, thanks

Any idea why my titles (which are images - the h2 headers are indented off the page) are mis-aligning on some browsers?

Border:0; isn't a good idea, use border:none;

your h2 code has the following.

 text-indent: -9999px;

That should only be used when you want to hide the text from the users, but Ie will still show it (in ie6). The best bet I find is to add, display:none; if you want to hide it.

[mrsminkie]

DanL, on 23 December 2009 - 04:56 PM, said:

It's because you've declared a Strict Doctype. Try Transitional XHTML if you need to add inline styling like this.

Ah - I don't really understand which one I should be using. I was just opening an HTML file in Dreamweaver and not even looking at that. Then I saw a tutorial which said to use Strict.

Is there an article anywhere that explains the differences?

[DanL]

mrsminkie, on 23 December 2009 - 04:53 PM, said:

Any idea why my titles (which are images - the h2 headers are indented off the page) are mis-aligning on some browsers?

Your H2 is a block-level container, and the <img> you've used for the title appears below this, then the #UCA div is width 300px and floated left, so the pushed-down image will wrap to the #UCA container.

How about giving the H2 an ID and using CSS to set the image as a background image? You can then remove the <img> and all should be well.

[DanL]

mrsminkie, on 23 December 2009 - 05:03 PM, said:

Ah - I don't really understand which one I should be using. I was just opening an HTML file in Dreamweaver and not even looking at that. Then I saw a tutorial which said to use Strict.

Is there an article anywhere that explains the differences?

Try:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

http://24ways.org/20...s-strict-markup

[mrsminkie]

Faevilangel, on 23 December 2009 - 04:58 PM, said:

Border:0; isn't a good idea, use border:none;

your h2 code has the following.

 text-indent: -9999px;

That should only be used when you want to hide the text from the users, but Ie will still show it (in ie6). The best bet I find is to add, display:none; if you want to hide it.

Again - something I picked up from a tutorial. Most web-design tuts seem to suggest doing that. Display:none does seem to make more sense.

Thanks again.

[mrsminkie]

DanL, on 23 December 2009 - 05:06 PM, said:

Try:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

http://24ways.org/20...s-strict-markup

Thank you.

Nice website. I notice that you have your twitter feed in a different format to that horrible box that they give you code for. I can't seem to find the area in twitter that enables you to get the html/javascript code so that you can format the layout of the text.

[mrsminkie]

DanL, on 23 December 2009 - 05:03 PM, said:

Your H2 is a block-level container, and the <img> you've used for the title appears below this, then the #UCA div is width 300px and floated left, so the pushed-down image will wrap to the #UCA container.

How about giving the H2 an ID and using CSS to set the image as a background image? You can then remove the <img> and all should be well.

Can I do that as I have about 6 different H2 headers?

[DanL]

mrsminkie, on 23 December 2009 - 05:08 PM, said:

Thank you.

Nice website. I notice that you have your twitter feed in a different format to that horrible box that they give you code for. I can't seem to find the area in twitter that enables you to get the html/javascript code so that you can format the layout of the text.

Thanks...I'm using a WordPress plugin to grab the latest tweet, which then displays the feed in a minimal format...then CSS works the magic

[DanL]

mrsminkie, on 23 December 2009 - 05:11 PM, said:

Can I do that as I have about 6 different H2 headers?

Of course, just give each one a different ID. My own website uses this for the graphic page title you see in the top-left of the content window on each page, for example:

<h2 id="postID-21" class="pageTitle">
    <span class="postTitleImage">
        <span class="postTitleText">Magento</span>
    </span>
</h2>

[mrsminkie]

DanL, on 23 December 2009 - 05:11 PM, said:

Thanks...I'm using a WordPress plugin to grab the latest tweet, which then displays the feed in a minimal format...then CSS works the magic

I might save that for another day! I'm no web designer by any stretch, BUT I do find it extremely interesting and think that what is done these days on some websites is just amazing. There's also great community of people willing to share their knowledge and help other people.

[mrsminkie]

DanL, on 23 December 2009 - 05:13 PM, said:

Of course, just give each one a different ID. My own website uses this for the graphic page title you see in the top-left of the content window on each page, for example:

<h2 id="postID-21" class="pageTitle">
    <span class="postTitleImage">
        <span class="postTitleText">Magento</span>
    </span>
</h2>

Oh yes of course. h2 id, class and span - it's things like this that I'm still getting my head round. However, when I find a website that I like, I look at their coding to find out how things are done.

I still have some things that I want to change with the design so I'll make the suggested changes and try and get it finished.

[Seth]

Transitional is more forgiving. W/ strict you need to keep to the exact code.

[mrsminkie]

Hello again,

I'm trying to do what has been suggested before and if I hide the h2, it also hides the background. Is there a simple way of having an image for a title on a page, where the text is picked up by google, but the actual HTML text is not seen by the viewer?

thanks in advance

[mrsminkie]

mrsminkie, on 06 January 2010 - 02:05 PM, said:

Hello again,

I'm trying to do what has been suggested before and if I hide the h2, it also hides the background. Is there a simple way of having an image for a title on a page, where the text is picked up by google, but the actual HTML text is not seen by the viewer?

thanks in advance

Never mind! I've sorted it out - somehow.