CSS - Screen Resolution Problem (hi-res Ok, Lower Res All Messed Up!)
Hi everyone,
In high resolution settings (like 1600x900) this layout looks great. But, on 1280 x 720 the layout gets all screwed up. Can someone look at the CSS below and let me know where I'm screwing up? Thanks! The site is romanceplaybook dot com and here is the CSS: body { background: #ffffff url(images/bkgd.jpg) top repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px auto 0px; padding: 0px; } #wrap { background: #ffffff url(images/bg.jpg) top center repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px 300px 0px; padding: 0px; } /************************************************ * Hyperlinks * ************************************************/ a, a:visited{ color: #507AA5; text-decoration: none; } a:hover{ text-decoration: underline; } /************************************************ * Header * ************************************************/ #header { background: #FFFFFF; width: 1000px; margin: 0px auto 0px; padding: 0px 0px 0px 0px; text-align: center; text-transform: uppercase; } #header a { font-family: Times New Roman, Helvetica, Sans-Serif; font-size: 48px; color: #333333; text-decoration: none; padding: 0px 10px 0px 10px; margin: 0px; text-transform: uppercase; } #header a:hover{ color: #333333; } /************************************************ * Navbar * ************************************************/ /************************************************ * Left Sidebar * ************************************************/ #l_sidebar { float: left; width: 160px; margin: 0px 20px 0px 0px; padding: 20px 0px 20px 0px; } #l_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #l_sidebar li { list-style: none; margin: 0px; padding: 0px; } #l_sidebar ul li { margin: 0px; padding: 5px 0px 0px 0px; } #l_sidebar ul li a { color: #507AA5; text-decoration: none; } #l_sidebar ul li a:hover { color: #507AA5; text-decoration: underline; } /************************************************ * Right Sidebar * ************************************************/ #r_sidebar { float: right; width: 160px; margin: 0px 0px 0px 0px; padding: 20px 0px 0px 0px; } #r_sidebar p{ padding: 2px 0px 16px 0px; margin: 0px; line-height: 20px; } #r_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #r_sidebar ul li { margin: 0px; padding: 5px 0px 0px 0px; } #r_sidebar ul li a { color: #507AA5; text-decoration: none; } #r_sidebar ul li a:hover { color: #507AA5; text-decoration: underline; } /************************************************ * Content * ************************************************/ #content { width: 950px; margin: 0px auto 0px; padding: 0px; } #content p{ padding: 0px 0px 15px 0px; margin: 0px; line-height: 20px; } #content p img{ float: left; border: none; margin-right: 15px; margin-bottom: 10px; } #content h1 { color: #333333; font-size: 22px; font-family: Times New Roman, Verdana, Arial, Sans-Serif; font-weight: normal; padding: 0px 0px 0px 0px; margin: 0px; } #content h1 a { color: #333333; text-decoration: none; } #content h1 a:hover { color: #658DB5; text-decoration: none; } #content h2 { color: #333333; font-size: 14px; font-family: Times New Roman, Verdana, Arial, Sans-Serif; font-weight: bold; padding: 5px 0px 5px 0px; margin: 0px; border-top: 1px dotted #C0C0C0; border-bottom: 1px dotted #C0C0C0; } #content p ol{ margin: 0px; padding: 0px 0px 0px 20px; } #content p ul{ margin: 0px; padding: 0px 0px 0px 20px; } blockquote{ margin: 0px 0px 0px 25px; padding: 0px 25px 0px 10px; font-style: italic; color: #666666; border-left: 3px solid #B3C8DB; } #content blockquote p{ margin: 0px 0px 20px 0px; padding: 0px; } #contentmiddle { float: left; width: 550px; margin: 0px 0px 0px 0px; padding: 20px 5px 10px 20px; text-align: left; } #contentmiddle p img{ float: left; border: none; margin-right: 15px; margin-bottom: 10px; } .contentdate { background: #FFFFFF url(images/date.gif); float: left; width: 45px; height: 50px; margin: 0px; padding: 0px; } .contentdate h3 { color: #FFFFFF; font-size: 10px; font-weight: normal; padding: 1px 0px 0px 10px; margin: 0px; text-transform: uppercase; } .contentdate h4 { font-family: Times New Roman, Helvetica, Sans-Serif; color: #999999; font-size: 21px; font-weight: bold; padding: 5px 4px 0px 0px; margin: 0px; text-align: center; } .contenttitle { float: left; width: 480px; margin: 0px; padding: 0px 0px 0px 10px; } #contentmiddle ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #contentmiddle ul li { margin: 0px; padding: 5px 0px 0px 0px; } #contentmiddle ul li a { color: #507AA5; text-decoration: none; } #contentmiddle ul li a:hover { color: #507AA5; text-decoration: underline; } #content img.wp-smiley { float: none; border: none; padding: 0px; margin: 0px; } #content img.wp-wink { float: none; border: none; padding: 0px; margin: 0px; } .postspace { background: #EFEFEF url(images/spacer.gif); width: 440px; height: 32px; margin: 0px; padding: 0px; } /************************************************ * Footer * ************************************************/ #footer { background: #FFFFFF; width: 952px; margin: 0px auto 0px; padding: 10px 0px 10px 0px; text-align: center; border-top: 1px solid #C0C0C0; } /************************************************ * Search Form * ************************************************/ #searchdiv { margin: 0px; padding 0px; } #searchform { margin: 0px; padding: 0px; overflow: hidden; } #s { width: 190px; background: #EFEFEF url(images/search.gif); color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; padding: 3px; margin: 8px 0px 0px 0px; border: 1px solid #C0C0C0; } /************************************************ * Comments * ************************************************/ #commentblock { width: 395px; background: #EFEFEF; color: #333333; float: left; padding: 10px 20px 0px 20px; margin: 10px 0px 10px 0px; border: 1px solid #C0C0C0; } ol#commentlist { padding: 5px 0px 5px 0px; margin: 0px; list-style-type: none; } .commentdate { font-size: 12px; padding-left: 0px; } #commentlist li p{ margin-bottom: 8px; line-height: 20px; padding: 0px; } .commentname { color: #333333; margin: 0px; padding: 5px 5px 5px 0px; } .commentinfo{ clear: both; } .commenttext { clear: both; margin: 5px 0px 20px 0px; padding: 20px 10px 5px 10px; width: 365px; background: #FFFFFF url(images/comment.gif) no-repeat top; } .commenttext-admin { clear: both; margin: 5px 0px 20px 0px; padding: 20px 10px 5px 10px; width: 365px; background: #FFFFFF url(images/comment.gif) no-repeat top; } #commentsformheader{ padding-left: 0px; } #commentsform{ text-align: left; margin: 0px; padding: 0px; } #commentsform form{ text-align: left; margin: 0px; } #commentsform p{ margin: 0px; } #commentsform form textarea{ width: 99%; } p.comments_link img{ margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } Similar TutorialsI am having a very strange problem with firefox and different screen resolutions. I have just made a navigation system for a website and tested the links in I.E and F.F - no problems in my screen resolution of 1280 x 1024. I tested it at 800 x 600 and 1024 x 768 and firefox does not change to the hover status when hovering over the link. There are no problems in I.E at the smaller resolutions. Does anyone have any ideas what is causing this problem. After playing around with a few things i discovered that if i change my display from inline to block it works perfectly in firefox at all resolutions - In I.E it causes a step like appearance to the links. Below is the css I am using, I have also added the xhtml at the bottom. Code: #top_button li { margin: 0; display: inline; list-style-type: none; } #top_button a:link, #top_button a:visited { float: left; overflow: hidden; height: 0px; } #top_nav { margin: 0; padding: 0; } #top_button { position: relative; top: 0px; left: 157px; height: 19px; list-style: none; margin: 0; } #t1 a:link, #t1 a:visited { background-image: url(../images/top_nav_home_1.gif); background-repeat: no-repeat; padding-top: 19px; width: 47px; } #t1 a:hover, #t1 a.current { background-position: 0px -19px; } #t2 a:link, #t2 a:visited { background-image: url(../images/top_nav_services_1.gif); background-repeat: no-repeat; padding-top: 19px; width: 63px } #t2 a:hover, #t2 a.current { background-position: 0px -19px; } #t3 a:link, #t3 a:visited { background-image: url(../images/top_nav_portfolio_1.gif); background-repeat: no-repeat; padding-top: 19px; width: 65px; } #t3 a:hover, #t3 a.current { background-position: 0px -19px; } #t4 a:link, #t4 a:visited { background-image: url(../images/top_nav_resources_1.gif); background-repeat: no-repeat; padding-top: 19px; width: 72px; } #t4 a:hover, #t4 a.current { background-position: 0px -19px; } #t5 a:link, #t5 a:visited { background-image: url(../images/top_nav_contact_1.gif); background-repeat: no-repeat; padding-top: 19px; width: 59px; } #t5 a:hover, #t5 a.current { background-position: 0px -19px; } { xhtml Code: <div id="top_nav"> <ul id="top_button"> <li id="t1"><a class="current" href="/" title="home"></a></li> <li id="t2"><a href="/services" title="services"></a></li> <li id="t3"><a href="/portfolio" title="portfolio"></a></li> <li id="t4"><a href="/resources" title="resources"></a></li> <li id="t5"><a href="/contact" title="contact"></a></li> </ul> </div> I would appreciate any suggestions! Hi All, I have a fixed div which I am using as a footer in my application. here is the screen shot of my page please have a look first so u will understand what i am talking about. http://img192.yfrog.com/img192/5572/1280x768.gif Problem is that if I browse the application on 1024 x 768 pixels it works great but when i change the resolution up to 1280 x 800 pixels the image inside the div change its position. I want this to appear same on every resolution...any suggestions or workaround. the CSS code is below Code: #footer { position: fixed; top: auto; left: auto; width: auto; } here is the HTML Code: <html> <head id="Head1" runat="server"> <link href="../App_Themes/style.css" rel="stylesheet" type="text/css" /> <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"> </script> <title></title> <style type="text/css"> .style1 { width: 800px; background-color:White } .style2 { height: 391px; } .style3 { text-align: right; } </style> </head> <body bgcolor="#d7d7d7"> <form runat="server"> <div id="content" style="margin: auto; border: thin solid #C0C0C0; padding: 0px 0px 0px 0px; width: 820px; height: 595px" align="center"> <table align="center" class="style1"> <tr> <td style="font-family: 'Times New Roman', Times, serif; font-size: small; color: #FF0000;" class="style3"> <asp:ContentPlaceHolder ID="StatusBar" runat="server"> </asp:ContentPlaceHolder> <asp:Image ID="Image1" runat="server" ImageUrl="~/images/appHeader.png" /> </td> </tr> <tr> <td class="style2" align="left" valign="top"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </td> </tr> <tr> <%--<td style="background-color: #FF9933; height: 15px;"> </td>--%> </tr> </table> <div id="footer"> </div> <%-- <table align="center" class="style1"> <tr> <td> <div id="footer"> <img src="../images/footer.png" alt=""/> </div> </td> </tr> </table> --%> </div> </form> </body> </html> I want a table below the container div and want to place my footer div inside that table and on every resolution it should come up the same...i did try but its not working...help need I am in the process of designing a website and I have dual monitors at home, one is using 1024x768, and other is using 1280x1024 resolution. The website I have designed, off course looks different from one resolution to the other. One the less resolution monitor, the site looks big (my masthead is 750x200 and the whole page is approximately 770x900), however, on the high resolution, the site looks tiny. on 1200 wide resolution my page width is only 770, so there is white (in my case blue) space both sides making it look not so good. Because of the above reason, the site looks big on one monitor and very tiny on the other. I am sure there would be lots of people out there with those two kinds of resolutions (I am mostly concerned about these two resolutions). I wonder how do people deal with this when they are designing a website? Could one find out the resolution of the monitor ahead of time (before displaying the page) and have different css/images be loaded based on the monitor it is being viewed? Is there a concept of floating site -- what I mean by that is if there is a concept of site automatically changing appearance based on screen resolution? Thanks!!! Hi, thanks for your time. My problem is with screen resolution, I am currently building a website using 1280 x 1044 pixels. At this resolution the website looks fine. I have used CSS styles and the size page I have used is 80% so there is a blue background around the page. The problem is I have 2 images sized 990 width pixels, at the current resolution they look fine, but when I drop the resolution they will stay the same size (which is now way too big) while the page size will remain a constant 80% so I am left with an image nearly twice as wide as my content. I have thought of splitting one of the images and used a float left and right for it, but the other image is not possible to do that with, I have seen sites with big banners on so how do those images remain constant size even when you change resolution? All help will be greatly appreciated. Many thanks. Craig Hi There.. I am still learning CSS/Xhtml so please be patient and understanding, . Anyway, I am making a site for my business and wanted to try some new idea. Everything looks good except for my navigation bar in IE. Whenever I change resolution the navigation bar moves out of position and I have to refresh to get it to snap into place. In Firefox and Chrome I do not have this issue. I have been googling trying to find the solution but have come up empty. Could someone look at my code and tell me when I did wrong so I don't make the same mistake again? Thanks for your help. Here is the CSS: <style type="text/css"> <!-- #html, body { top: 0px; right: 0px; bottom: 0px; left: 0px; width:920px; height: 100%; background: url(desk.jpg) white center no-repeat; background-repeat:no-repeat; margin: 0 auto; text-align: center; font-family: Verdana, Helvetica, sans-serif; } #container { width: 900px; height:840px; background-image: url(bg1.png); margin: 0 auto; text-align: left; } #mainContent { padding: 3px 60px; margin-top: 0px ; } #text { padding: 0; margin-left: 35px; text-align: center; } #navigation { float:right; display:block; width: 400px; margin-top: 15px ; font-family:Trebuchet MS, Helvetica, sans-serif; overflow:hidden; } #navigation ul { float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #navigation ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #navigation ul li a { display:block; margin:0; padding:.4em .8em; color:#000; text-decoration:none; line-height:1.3em; } #navigation ul li a span { display:block; } #navigation ul li.active a { color: #fff; font-weight:bold; } #navigation ul li a:hover { color: #fff; font-weight: bold; } .guy { float: right; margin-top: -70px; } .yell { float: left; margin-top: 20px; padding-bottom: 0px; margin-right: 30px; margin-left: 20px; } .second { margin-top:45px; } #footer { font-size: 11px; margin-bottom: 10px; } --> This one has probably been beaten to death by now, but I can't seem to find a specific answer. I develop on a monitor 1024x768, and use a standard font size (for general text) of 11px. When using a 800x600 resolution monitor, the text seems oversized - which is what one would expect with a px setting. Or looking at it from the other side of the fence, if I develop on the 800x600 and get a decent text size, it looks too small on the higher resolution. I can use 2 .css files with different font size settings and javascript to direct to the relevant css file. As far as I can tell, that is the only way I can get a 'similar' look on both screen resolutions. Is there another way where I can get away with using only 1 css file? What do others do to get around this problem? I have a web page with three columns. The column on the right is the menu column which i want to keep in a certain position even when the user scrolls down. I know how to do this using css, but the problem is that if the resolution changes so does the position of the column. Is there a way to fix the position only from the top of the browser window and use the center column (or container that holds the 3 columns) for the horizontal alignment? Thanks in advance Hi I am designing a page in which I want to include a background image that is anchored to the bottom right of the screen. I have managed to do this, the only problem I am having is that due to the image being a big one (dimensions) when the user's screen is of a lower resolution such as 800 x 600, the image takes over most of the page's background which is distracting from the main content. My idea is to have the image resize based on the user's screen resolution. Is this a feasible solution and if yes, how can it be achieved? Thanks I've just recently started using CSS, and unlike tables, I have no clue how the heck to autostretch the layout. Could someone to tell me how to make my page "adapt" to different resolutions for CSS? I don't want to have to make seperate styles for each resolution, is there a simple property and value that I can just insert somewhere with the position property? thanks (sorry i posted this again, I just felt the other post was not clear) www.oakdalehosecompany.org or oakdalehosecompany.org is my website Its perfect when you view it with firefox at 1024x768 res, but when you view it with internet explorer at 800x600 res it looks horrible. is there anyway to fix this like a program or something. bear with my this is my fire site i ever made so i dont know much. thanks for any that help Hi, i have a site that has this parculiar pixel that just appears when you have a 1280px by 1024px screen res and only if you are viewing it in IE, it is fine in mozilla and the rest. PLEASE Help anyone. I don't know what it could be. please look at http://russellcorp.loadedtech.com.au the skin file can be found at http://russellcorp.loadedtech.com.a...ns/RCA/skin.css THANKS Hi I have an image positioned on my page with this Code: .notpos { overflow: visible; position: absolute; visibility: visible; z-index: auto; height: auto; width: auto; left: 170px; top: 20px; } The problem is when a different screen resolution is used the image moves .......... can anyone help please? Thanks for taking the time to read my question, I want to hide this line from IE6 and lower Code: padding: 0px 0px 0px 12px; Is there something I can do to it to hide it? I need it to work in IE7, FF etc. I'm looking on line, but I guess I'm not typing in the correct search terms, as I'm not coming up with anything. Thanks, Brad When I use a the page title as a link, to go to a category or external page, in WordPress (most recent version) the page title with a link rather than just text in the title, gets moved about 3px down in stead of staying in line with the rest. I am using the Graphpaper Press Gridline Lite theme. the Website is gregdelima.com and the relevant CSS is: gregdelima.com/wp-content/themes/gridline_lite/gridline_lite/style.css If I set a height for my LIs, then IE does not increment the list item. It shows a. a. a. a. instead of a. b. c. d. Actually it's the same for any list-style-type. It never increments the list-type, even when it's just the default style. I couldn't find any other mention of this anywhere. Does anybody know what causes this bug, or if there's a way to fix it? Here is some code to reproduce: Code: /* CSS */ #qform ol { list-style-type:lower-alpha; } #qform ol li { color:#333; height:25px; margin:10px 0; padding:0 0 0 20px; } #qform ol li input { margin:3px 5px 0 0; } #qform ol li label { margin:0; } <!-- HTML --> <form id="qform" action="index.php" method="post"> <fieldset> <ol> <li> <input type="radio" id="rada" name="answer" value="a" /><label for="rada">Once</label> </li> <li> <input type="radio" id="radb" name="answer" value="b" /><label for="radb">Twice</label> </li> <li> <input type="radio" id="radc" name="answer" value="c" /><label for="radc">Three Times</label> </li> <li> <input type="radio" id="radd" name="answer" value="d" /><label for="radd">A Lady</label> </li> </ol> <input type="submit" value="OK" /> </fieldset> </form> In IE6, that will display a list with a, a, a, a. Remove the height from #qform ol li and it works as it should. Thanks, Hello, I'm having issues with my top navigation on my upcoming website. For some reason it isn't displaying correctly in IE7, but in IE8+ and Firefox it's working just fine.. URL is.. http://itelligentconsulting.com/itelligent/ Any ideas? Thanks. Hello, I'm having an interesting dilemma. Hopefully I can get some advice. I have created a site using a 2 column liquid layout. The site is created using CSS. I have tested successfully in both FF & IE (which my client uses). In the content area, there is a data table that is generated dynamically. At times the table consists of many columns. If the table strecthes beyond the screen view (resulting in horizontal scrolling) the container/layout does not stretch with the table. Any thoughts? Any suggestions will be greatly appreciated! Below are snippets of code from the css code and html code: CSS Code: body { margin: 0px 20px 0px 20px; background-color: #069; background-image: url(../images/bkgd.gif); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 70%; color: #036; } #container { width: 100%; margin: 0px auto 0px auto; background-color: #DDD; } ... #content { background-color: #FFF; padding: 20px; margin-left: 190px; } ... #content_main table.data { margin: 0px 0px 0px 0px; border: 1px solid #369; background-color: #FFF; } #content_main table a.nobrdr { border-bottom: none; } #content_main table.data th { height: 20px; color: #E8E8E8; text-align: center; background-color: #369; border: 1px solid #2C537D; text-transform: uppercase; } #content_main table.data td { height: 25px; padding: 3px; border: 1px solid #CCC; vertical-align: top; line-height: 15px; } HTML Code: <table width="100%" border="0" cellpadding="0" cellspacing="0" class="data" summary="this table displays BDXT selected data"> <tr> <th scope="col" width="5%" nowrap>fund</th> <th scope="col" width="6%" nowrap>bsli</th> <th scope="col" width="4%" nowrap>reg</th> <th scope="col">title</th> <th scope="col" width="9%" nowrap>projcode</th> <th scope="col" width="7%" nowrap>cip</th> <th scope="col" width="4%" nowrap>afc</th> <th scope="col" width="10%" nowrap>avail</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th scope="col" width="10%" nowrap>unoblig</th> <th scope="col" width="5%" nowrap> </th> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD) </td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>140</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>3J0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>TC</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>4C0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> </table> Hi there, I have a form with a text field and a submit link (text), however in IE, the link appears lower down than in FF. Ideally I would like to have the link vertically centered to the text field. This is a screen shot of what I mean. Any ideas how I can sort this out? Good Day, Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem? Best, Colin Hi, I am a wannabe css compiler... Have the following problem. wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen. I cannot figure out how to compensate the (top/left) position to cover both type screens... Anyone help me? |