header does not scale correctly in my laptop though it works fine on desktop

Posted on 2012-08-24
Last Modified: 2012-09-10
need help
header does not scale correctly in my laptop though it works fine on desktop
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <td width="289" height="67">
                        <img src="/Images/left_header.gif" alt="" border="0" title=""
                            width="289" height="67">
                    <td width="325" height="67" style="background-image: url(/Images/header_slice.gif);">
                    <td width="203" height="67">
                        <img src="/Images/header_live_support.gif" alt="" border="0" title=" Support"
                            width="203" height="67" style="cursor: pointer; height: auto; width: auto" onclick="javascript: try{openWindow('/LiveSupport.aspx','LiveSupport',740,610,true,true);}catch(e){}">
                    <td height="67" style="background-image: url(/Images/header_slice.gif); font-size:large; font-family:Calibri;" align="right">
                        Welcome back
                        <asp:Label ID="lbluserName" runat="server" Text="Label"></asp:Label>
                        <asp:Label ID="lblLogOff" runat="server">&nbsp;&nbsp;&nbsp;<asp:LinkButton ID="lbLogOut"
                            OnClick="lbLogOut_Click" runat="server" Text="Log Off" Style="color: Black" CausesValidation="false"></asp:LinkButton>
                    <td width="13" height="67" style="background-image: url(/Images/right_header.gif);">
Question by:Meinhoonaa
    LVL 35

    Expert Comment

    by:Miguel Oz
    What is the display size of your desktop and laptop?
    Most likely laptop width is smaller than desktop width, then you need to redesign your page to deal with smaller displays. For example:
    <td width="289" height="67">
    <td width="325" height="67" style="background-image: url(/Images/header_slice.gif);">
     <td width="203" height="67">
    You can design the page for smaller size and allow it to scale:

    Notes: 1) You can only check screen size in javascript no server code.
    2) Define a minimum screen size to support so that you can scale it.

    Author Comment

    I tried float, I tried width=""50%"
    noting works
    LVL 35

    Accepted Solution

    Have you tried:
    <td width="35%" height="67">
    <td width="40%" height="67" style="background-image: url(/Images/header_slice.gif);">
    <td height="67">

    and use simple text contents. Once you have done that you can measure how big are your cells using IE "developer tools" and size your images accordingly.

    Warning: Also you need to change any css file that may affect the page style else changes above will not work.
    For further help please post the following info:
    - Laptop display size.
    - Desktop display size.
    - Any css file that the page uses.
    - Attach whole page including graphics.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now