Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer White Block under IE - not FF!

    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!

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by AndyArmstrong View Post
    View it under FireFox and we get what we want, that green colour fills in that space.
    A screen shot 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.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is because you are viewing the page at under 1280x1024 resolution - probably 1024x768.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by AndyArmstrong View Post
    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?

  • #5
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want to but i dont know how to fix it!

    What do i do>!

  • #7
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by koyama View Post
    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

    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.

  • #8
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please create a new thread for your Question saed- I am explicitly trying to sort out my white block under IE!!!!

    Thanks

    Andy

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by AndyArmstrong View Post
    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.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Quote Originally Posted by saeed View Post
    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.

  • #10
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!?

  • #12
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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.

  • #13
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #14
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <bump>

  • #15
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <bump help help help!>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •