page showing different on different screens

This is a discussion on "page showing different on different screens" within the Web Page Design section. This forum, and the thread "page showing different on different screens are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Oct 26th, 2007, 16:24
Junior Member
Join Date: Sep 2007
Location: Cumbria
Age: 24
Posts: 42
Thanks: 0
Thanked 0 Times in 0 Posts
Unhappy page showing different on different screens

Hi I've been trying to improve my site after posting it on the critique forum and getting some very helpful feedback.

But now I have a problem.

When I view the page on my laptop which has a wide screen it looks exactly how I want it, But, when I view it on my dads non-widescreen desktop monitor the page is showing up with a different layout not by much but the text is mis-aligned I've added some screen shots to show you what I mean.

the attached images are what is showing on dads
the thumbnails are whats showing on mine and how I want it

Can anybody help?

This is my code:
Code: Select all
*{
padding:0; margin:0;
}

body {
background : url(images/transbrick.jpg);
background-attachment: fixed;
font : 14px verdana, arial, sans-serif;
color : #036;
}

a, a:visited {
color : #f93;
text-decoration:none;
}

a:hover {
color : #036;
text-decoration:none;
}

#page {
width : 780px;
margin : auto;
background : #ffffff;
font : 14px verdana, arial, sans-serif;
text-align : left;
}

#page p{
font : 14px verdana, arial, san-serif;
Color: #036;
margin: 0 10px 15px 20px;
padding:0px 10px 15px 20px;
}


#page h2 {
text-align: center;
padding-bottom: 40px;
}

#page h4 {
padding-top: 25px;
}
#pageHead {
height : 123px;
width : 760px;
position : relative;
padding-top : 10px;
margin: 0px 0px 5px 10px;
background : #ffffff url(theme_images/auckland2.jpg) no-

repeat;
}

#pageHead cite {
position : absolute;
width : 465px;
text-align : right;
right : 20px;
top : 20px;
color : #ffc;
text-transform : uppercase;
font-style : normal;
padding : 5px 20px 0px 0px;
font-weight : bold;
}

#pageSidebar {
float : left;
margin: 0px 20px 20px 10px;
width : 180px;
background : #ece1be url(theme_images/pagesidebar-bg.gif) 

repeat-y top left;
}

#pageNav {
margin-left: 0px;
background : #f93 url(theme_images/pageNav-bg.gif) repeat-y 

top left;
}

#pageNav h2.title {
background : url(theme_images/pageNav-heading.gif) no-

repeat top left;
color: #036;
padding : 0;
margin : 0px;
font-size : 150%;
text-align : center;
height : 34px;
padding : 15px 20px 0 0;
}

#pageNav ul, #pageNav li {
padding : 0;
margin-left : 8px;
list-style-type : none;
margin : auto;
}

#pageNav ul {
width : 148px;
padding-bottom : 5px;
}

#pageNav li {
height : auto !important;
padding-top : 5px;
padding-left : 10px;
height : 23px;
min-height : 23px;
background : url(theme_images/pageNav-button.gif) no-repeat 

top left;
margin-bottom : 2px;
}

#pageNav li a, #pageNav li a:visited {
color : #339;
text-decoration : none;
font-size : 12px;
}

#pageNav li a:hover {
color : #c30;
}

#blockD {
background : url(theme_images/pagesidebar-end.gif) no-repeat 

bottom left;
padding-bottom: 5px;
}

#blockD h2.title {
padding : 0;
margin : 0;
background : url(theme_images/pagesidebar-heading2.gif) no-

repeat top left;
height : 30px;
text-align : center;
font-size : 16px;
padding-top : 8px;
}

#blockD p {
text-align: center;
margin:2.5em 0 2.5em 0;
}

#blockD a {
text-decoration: none;
}



#frontsplash {
margin-bottom: 40px;
margin-left: 332px;
width : 300px;
height : 164px;
background : url(theme_images/logo2.png) no-repeat top;
}

#pageFooter2 {
position : relative;
color : #ffffff;
margin-top : 8px;
margin-left : 10px;
width : 757px;
height : 41px;
background : url(theme_images/footer.gif) repeat-x top left;
}

#pageFooter2 #footNav {
position : absolute;
top : 10px;
right : 15px;
}

#pageFooter2 p {
position : absolute;
top : 10px;
margin : 0;
padding : 0;
left : 15px;
color : #f93;
}

#pageFooter2 #footLeft2 {
float : left;
background : url(theme_images/footer-left2.gif) no-repeat top 

left;
width : 9px;
height : 41px;
}

#pageFooter2 #footRight2 {
float : right;
background : url(theme_images/footer-right2.gif) no-repeat top 

left;
width : 9px;
height : 41px;
}

#navlist {
padding: 10px;
margin-top: 40px;
text-align:center;
}

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
text-align: center;
color: #f93;
}

#navlist li a, #navlist li a:visited {
color : #036;
text-decoration : none;
font-size : 12px;
}

#navlist li a:hover {
color : #f93;
}

#photo {
padding : 5px;
text-align : center;
}

.photo2 {
float: right;
margin: 0px 20px 20px 40px;
}

.photo3 {
float: left;
margin: 0px 20px 10px 50px;
}

.photo4 {
text-align:center;
margin: 0px 20px 10px 20px;
}
ul.none {
list-style-type: none; 
list-style-position: inside;
}

li.marg {
margin-bottom: 10px;
margin-left: 50px;
}
Attached Images
File Type: bmp bottom.bmp (462.4 KB, 13 views)
File Type: png bottom2.png (255.1 KB, 11 views)
File Type: bmp top.bmp (458.8 KB, 11 views)
File Type: png top2.png (257.8 KB, 16 views)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Oct 26th, 2007, 16:45
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: page showing different on different screens

I don't see a difference really?

What's the link?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Oct 26th, 2007, 16:48
Junior Member
Join Date: Sep 2007
Location: Cumbria
Age: 24
Posts: 42
Thanks: 0
Thanked 0 Times in 0 Posts
Re: page showing different on different screens

http://www.solidmasonry.co.nz
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Oct 26th, 2007, 16:54
Junior Member
Join Date: Sep 2007
Location: Cumbria
Age: 24
Posts: 42
Thanks: 0
Thanked 0 Times in 0 Posts
Re: page showing different on different screens

Basically the line about the dictionary definition should be directly under the nav bar and at the bottom of the page the very last line should be inline with the very bottom of the photo.

Oh and I didn't get it on the screen shot but on the non-widescreen the footer is out of whack

Last edited by xkatx21x; Oct 26th, 2007 at 17:05. Reason: extra info
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Oct 26th, 2007, 17:19
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Re: page showing different on different screens

Can you not adjust the width of the list items in the footer?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Oct 26th, 2007, 17:52
Junior Member
Join Date: Sep 2007
Location: Cumbria
Age: 24
Posts: 42
Thanks: 0
Thanked 0 Times in 0 Posts
Re: page showing different on different screens

maybe, but that wont affect the rest of the page. I really want it to look the same on all screens
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Testing on diff. sized screens lmc148 Web Page Design 4 Jun 7th, 2008 13:24
[SOLVED] Showing something on a page - only if they have Javasciprt disabled. Ed JavaScript Forum 31 Dec 24th, 2007 20:14
Showing Current Page with Flash Slider Menu samason Flash & Multimedia Forum 2 Jun 9th, 2007 15:46
Background page not showing up aaronh Web Page Design 4 Apr 30th, 2007 19:30
background image not showing up in Firefox but showing in other browsers! eskymo Web Page Design 21 Jan 19th, 2006 23:10


All times are GMT. The time now is 11:19.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42