+ Post New Thread
Results 1 to 13 of 13
EduGeek Joomla 1.5 Package Thread, Resolution Issues in Projects:; Hi, I am having issues with the resolution of my site. For me it all works fine and I have ...
  1. #1
    kal-mc's Avatar
    Join Date
    Mar 2009
    Location
    Surrey
    Posts
    31
    Thank Post
    15
    Thanked 0 Times in 0 Posts
    Rep Power
    0

    Resolution Issues

    Hi,

    I am having issues with the resolution of my site. For me it all works fine and I have browser tested with no issues. But I have heard back from users that the site isn't displaying well on higher resolutions. I have tested since and it is fine on IE, but distorts in high res for Chrome, Safari and Firefox

    The site is here

    I have included screenshots below;

    Chrome
    Firefox
    Safari

    Am I correct in diagnosing resolution as the problem? I am not sure how to begin thinking about fixing it, any help would be great

  2. #2

    3s-gtech's Avatar
    Join Date
    Mar 2009
    Location
    Wales
    Posts
    2,712
    Thank Post
    144
    Thanked 548 Times in 492 Posts
    Rep Power
    149
    It won't be the resolution of the screens it's viewed on - your site needs to be able to scale to all resolutions (to a degree, anyway). It looks like an with your css, in that as the site is getting wider it spills across onto the right of your header menu (menu_topmenu?)

  3. #3
    kal-mc's Avatar
    Join Date
    Mar 2009
    Location
    Surrey
    Posts
    31
    Thank Post
    15
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Any idea what part of it I might need to edit? You are right, the header and footer stay central.
    There is a section for main body in template.css but can't see anything that would do much.

    I had a look at a few other sites from this template on line and the problem seems to be occuring on them too.

  4. #4

    3s-gtech's Avatar
    Join Date
    Mar 2009
    Location
    Wales
    Posts
    2,712
    Thank Post
    144
    Thanked 548 Times in 492 Posts
    Rep Power
    149
    Can you share the css and html? We should be able to correct that with the underlying source.

    Edit: have found it, will take a look.
    Last edited by 3s-gtech; 19th March 2012 at 02:14 PM.

  5. #5

    3s-gtech's Avatar
    Join Date
    Mar 2009
    Location
    Wales
    Posts
    2,712
    Thank Post
    144
    Thanked 548 Times in 492 Posts
    Rep Power
    149
    Okay, I've just got much better results by changing the container div to this (in template.css):

    .container{
    width: 950px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 80px;
    }

    By adding the padding, it forces the whole div below the header, so it doesn't run alongside it. I think there's still some scruffy formatting in there, but it seems to look okay in a browser with that change.

  6. #6
    kal-mc's Avatar
    Join Date
    Mar 2009
    Location
    Surrey
    Posts
    31
    Thank Post
    15
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Hi, it fixes the main body moving, but throws the look of the page out when being viewed as it pads the body quite far down (and for some reason that grey bar is still flying off to the right?)

    Picture here

    I tried smaller numbers, but that brings back the original problem?

  7. #7

    3s-gtech's Avatar
    Join Date
    Mar 2009
    Location
    Wales
    Posts
    2,712
    Thank Post
    144
    Thanked 548 Times in 492 Posts
    Rep Power
    149
    Okay. Well, you have the div 'container' called twice, once for the main body, and once for a section of page that spills off to the right. This is in the html itself - I found that by deleting everything inside

    <div class="roundedmodulebg">

    This sorted itself - but this div may be used by one of your modules, so use with care! This is the deleted part:

    Code:
    <div class="container">
    		<div class="roundedmodule1">
    			<div class="roundedmodule2">
    				<div class="roundedmodule3">
    					<div class="roundedmodule4">
    						
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    I also changed the padding-top for the container div to 100px.
    Last edited by 3s-gtech; 20th March 2012 at 09:36 AM.

  8. Thanks to 3s-gtech from:

    kal-mc (20th March 2012)

  9. #8

    bladedanny's Avatar
    Join Date
    May 2009
    Location
    Sheffield
    Posts
    1,269
    Thank Post
    188
    Thanked 298 Times in 224 Posts
    Rep Power
    130
    Not had chance to test, just a thought. Would adding a clear: left; to the container div force it underneath the header?

    --edit--
    Just had a quick try with a css editor and it seems to work, it corrects the issue in firefox at my resolution.

    Hope this helps.
    Last edited by bladedanny; 20th March 2012 at 10:02 AM.

  10. Thanks to bladedanny from:

    kal-mc (20th March 2012)

  11. #9
    kal-mc's Avatar
    Join Date
    Mar 2009
    Location
    Surrey
    Posts
    31
    Thank Post
    15
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    I have just tried as you suggested, but it just removed the grey line under the header section and ending up shifting to the right again (this time with the resolution not as high as before)

    Also throws it slightly off when viewed at lower res in IE

  12. #10
    kal-mc's Avatar
    Join Date
    Mar 2009
    Location
    Surrey
    Posts
    31
    Thank Post
    15
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Hi BladeDanny,

    Have just tried that in index.php and template.css but no luck this end. Is that where you added?

  13. #11

    bladedanny's Avatar
    Join Date
    May 2009
    Location
    Sheffield
    Posts
    1,269
    Thank Post
    188
    Thanked 298 Times in 224 Posts
    Rep Power
    130
    Quote Originally Posted by kal-mc View Post
    Hi BladeDanny,

    Have just tried that in index.php and template.css but no luck this end. Is that where you added?
    Hi,

    Yes It was in template.css in the axe rescheek red template withing .container on line 116.

    Here is my before and after screenshots. These are just in firefox as I can't test other browsers as I only have the edit css add on for firefox.

    Resolution Issues-before.pngResolution Issues-after.png

  14. Thanks to bladedanny from:

    kal-mc (20th March 2012)

  15. #12
    kal-mc's Avatar
    Join Date
    Mar 2009
    Location
    Surrey
    Posts
    31
    Thank Post
    15
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Working my end on Chrome too, will test safari this evening.
    That's brilliant, Thank you!!!

    And thank you for your help too 3s-gtech

  16. #13

    3s-gtech's Avatar
    Join Date
    Mar 2009
    Location
    Wales
    Posts
    2,712
    Thank Post
    144
    Thanked 548 Times in 492 Posts
    Rep Power
    149
    Ha, yeah his fix was much more effective!

SHARE:
+ Post New Thread

Similar Threads

  1. Name resolution issue
    By Greenbeast in forum Wireless Networks
    Replies: 0
    Last Post: 27th January 2011, 11:49 AM
  2. 16:10 resolution issues & VGA splitters
    By Mr_Andy in forum Windows
    Replies: 12
    Last Post: 27th July 2009, 01:23 PM
  3. joomla header resolution issue
    By Ayaz in forum EduGeek Joomla 1.5 Package
    Replies: 0
    Last Post: 30th November 2008, 11:48 AM
  4. Exchange 2003 and Server 2003 SP1 issue.
    By tosca925 in forum Windows
    Replies: 0
    Last Post: 21st August 2005, 10:32 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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