...

View Full Version : White Block under IE - not FF!



AndyArmstrong
07-16-2007, 12:25 PM
This time its ie7 which is being a pain.

If you navigate to using IE :

http://www.new.3genergi.co.uk
username:newsite
password:123newsite

and look at the top left of the logo is a group of 4 boiler photos, and to the right of this is a nasty white block. This should actually be the green colour you can see around the page inbetween the different elements.

View it under FireFox and we get what we want, that green colour fills in that space.

Any chance you can help me find out why!

koyama
07-16-2007, 02:03 PM
View it under FireFox and we get what we want, that green colour fills in that space.
A screen shot (http://koyama.dk/demos/CF118889/screenshot_CF118889.png) of what I get in Firefox 2.0.0.4. As you can see the page looks broken.

I didn't look at the gaps. I think you need to get the basic rendering in place first.

AndyArmstrong
07-16-2007, 02:47 PM
That is because you are viewing the page at under 1280x1024 resolution - probably 1024x768.

koyama
07-16-2007, 10:30 PM
That is because you are viewing the page at under 1280x1024 resolution - probably 1024x768.
I am viewing the page with 1280x1024. So are you saying that the page is not supposed to be viewed with that resolution?

haveacigar
07-16-2007, 10:50 PM
Also broken for me. Id reccomend you sort out the code so it is available to the majority of the resolutions, otherwise you may lose potential customers.

AndyArmstrong
07-18-2007, 11:53 AM
I want to but i dont know how to fix it!

What do i do>!

saeed
07-18-2007, 12:05 PM
I am viewing the page with 1280x1024. So are you saying that the page is not supposed to be viewed with that resolution?

hello koyama,
am finding really hard to design web layout which is compatible with most of the resolutions i.e 800x600 n 1024x768 ... i donno about other cities but this is used by most of the Internet users in Karachi.

I am trying to make something like this (http://www.pcdc.org.pk/sample/index.html)

its looks fine in 1024 x 768 FF/IE ... but not in 800x600... I dont have any problems with vertical scrollbar ... but I REALLY HATE horizontal scrollbar.. donno why.

what i want from you is what are those things u considered before making web layout ... i.e. browser compatibility, screen resolution, colors, softwares used... etc.

any help regarding this will be appreciated.

Thanks,

Saeed.

AndyArmstrong
07-18-2007, 06:28 PM
Please create a new thread for your Question saed- I am explicitly trying to sort out my white block under IE!!!!

Thanks

Andy

koyama
07-19-2007, 03:03 AM
I want to but i dont know how to fix it!
What do i do>!
The reason why your page is breaking is because you have used the deprecated align attribute for your two images in your header. In Internet Explorer the effect of using the align attribute for images cannot be explained in terms of any CSS property. Hence it is incompatible with CSS. Note that this is not the case in Firefox where <img ... align="left"> is equivalent to img {float: left}.

If you want those two images to be next to one another then perhaps try to combine the two images into one image. Alternatively, insert the right image as a background image in your header.

My advice is to avoid using deprecated HTML attributes. Instead of a transitional document type then use a strict one. Then revalidate and eliminate deprecated attributes. Style the elements using CSS.


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


what i want from you is what are those things u considered before making web layout ... i.e. browser compatibility, screen resolution, colors, softwares used... etc.
My own opinion is that liquid layouts are the best. The problem using a fixed-width layout is that you need to decide on a certain fixed width. Probably that would have to be a width around 770px to avoid that users on a 800x600 display will get a permanent horizontal scroll bar.

I think that for many years the fixed-width layout was favored over the liquid layout because people didn't like the very long lines of text on a large display with maximized window. Also, at narrow window sizes the elements may start to overlap making the page useless.

This argument no longer holds because most browsers including IE7 support max-width and min-width. Besides that you can easily get a similar effect in IE5 and IE6 when the width is set up as a dynamic property.

So usually one would set the min-width to be the smallest width before elements start to overlap. Likewise, the max-width is set at the width where lines are still not too long for easy readability. Users can then still maximize the window and see a nice looking centered page.

AndyArmstrong
07-19-2007, 11:39 AM
Superb reply! Thanks.

Ok update:

Changed dtd to strict.

Made the 2 images into 1 at the top - and aligned it using css.

Now in the process of validating it - 8 errors :S confused as to how to fix them :(

AndyArmstrong
07-25-2007, 11:14 AM
Right ok I got rid of 6 - left with 2 that i cannot change - both those base and meta tags are automatically put into the document via a cms which i dont have access or knowledge on how to edit!

With it pretty much valid strict xhtml it still looks off in Firefox, looking good however in IE! and at a smaller resoution - its getting there but still got some way to go. What next!?

garydarling
07-25-2007, 04:59 PM
If you want to get rid of the white space around your boiler images, change the background color in your 'top-menu' div to something like #ADB583.

Your page would look better if your logo and menu text were smaller, and if you could follow Koyama's advice on making your page a maximum of 770px wide. Try not to fill the entire screen with stuff, give the eyes some vacant space for contrast.

AndyArmstrong
07-25-2007, 05:54 PM
Thanks Gary, useful tips.

I have shrunk the images a little - will do more so when I get my laptop back from repair as they all reside on that.

Now, What more can I do to ensure it works on lower resolutions. Thing is , how am i going to enforce no more than 770px wide - thats around half the resolution it was built using which is going to make it quite difficult.

Any suggestiions I could try using my current css implementation.

Thansk

Andy

AndyArmstrong
07-27-2007, 01:56 PM
<bump>

AndyArmstrong
07-30-2007, 10:26 AM
<bump help help help!>

AndyArmstrong
07-30-2007, 11:00 AM
I have a more specific issue now actually.

If you go to http://www.new.3genergi.co.uk username:newsite password: 123newsite

View the page at 1024x768 and use FireFox.

Notice how some of the text is sitting behind but inside the menu, this is obviously a stylesheet error but i cannot see what i would need to edit / change in order to correct this!

please help ASAP!

Thanks very much

Andy

koyama
07-30-2007, 06:25 PM
View the page at 1024x768 and use FireFox.

Notice how some of the text is sitting behind but inside the menu, this is obviously a stylesheet error but i cannot see what i would need to edit / change in order to correct this!
The problem is that you are using a percentage width for your sidebar. This almost always gives problems. I recommend that you use a fixed width.

Instead of this:


#sidepanel {
float : left;
width : 20%;
margin-left : 2px;
}
#main-content {
margin-left : 20%;
}
#top-menu {
padding : 0px 0px 0px 0px;
height : 5%;
text-align : left;
margin-bottom : 12%;
}
try this:


#sidepanel {
float : left;
width: 250px;
}
#main-content {
margin-left: 250px;
}
#top-menu {
}

AndyArmstrong
07-31-2007, 10:51 AM
Excellent. That has fixed the problem, looks great now.

Does anyone by any chance have IE for MAC, the site on that just looks plane weird.....

Why!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum