This is how my site currently looks on my PC:

http://i30.tinypic.com/j6ramv.jpg

However, when I go on a friend's computer or someone else's with a different resolution, it displays differently. Instead, those circled (or squared) elements break onto the next line for some strange reason.

If anybody can help me to figure out why, it would be most appreciated. This is my site: http://scrawlfx.com

Thank you! =]

Recommended Answers

All 11 Replies

What OS and browsers break your design?

Windows. Firefox.

I'm using Windows and Firefox too. Happens on IE, too. Not my IE, though. I think it has to do with screen resolutions.

Screen resolution shouldn't matter since you're not using a liquid layout. Your widths are static.

If it's just one friend's computer that does this I would dismiss it but if there's multiple computers that display the same error than something clearly is amiss.

Yeah, it's more than a couple. \=

try this:
in the main div of the page add these css codes
#AnyDivName{
width: 940px; margin-left:auto; margin-right:auto;
}

and for the inner divs add these codes:
#AnyDiveName {
overflow:hidden;
}
try to keep the inner divs positions relative instead of absolute. Hoping this would be solution.

Still nothing. =\

display arrors are usually caused by html code errors
xhtml creates a slew of errors tht were not previously errors, and is more strict in coding requirements
wrongly coded html puts browsers into quirks mode which is different in most browsers
fix the html and the display errors will likely disappear

This is how my site currently looks on my PC:

http://i30.tinypic.com/j6ramv.jpg

However, when I go on a friend's computer or someone else's with a different resolution, it displays differently. Instead, those circled (or squared) elements break onto the next line for some strange reason.

If anybody can help me to figure out why, it would be most appreciated. This is my site: http://scrawlfx.com

Thank you! =]

The first of all the mess caused is to correct the element with:
classname= "jcarousel-container jcarousel-container-horizontal" CSS Property
overflow: hiden;

This is to get you started on the right foot!

The first of all the mess caused is to correct the element with:
classname= "jcarousel-container jcarousel-container-horizontal" CSS Property
overflow: hiden;

This is to get you started on the right foot!

Where do you see this? =\ I can't seem to find it.

Where do you see this? =\ I can't seem to find it.

That's silly! :')
I found it pretty fast, if you ask me.
So you are coding a fixed width for 1024x768 screens only?!

OK
The offending element is:

[B]<div class="jcarousel-clip jcarousel-clip-horizontal">[/B] 
 <ul style="width: 1220px; left: 0pt;" id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
  <li jcarouselindex="1" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal">
   <a href="http://scrawlfx.com/2009/09/skate-3-brings-skate-crews-to-consoles-may-2010">
    <img src="http://scrawlfx.com/show_image_carousel.php?filename=/2009/09/skate-3-announced.jpg&amp;cat=1&amp;pid=18272" alt="SKATE 3 brings skate cr..." width="150" height="130">
SKATE 3 brings skate cr...
   </a>
  </li>
  <li jcarouselindex="2" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal">
   <a href="http://scrawlfx.com/2009/09/star-ocean-the-last-hope-announced-for-ps3">
    <img src="http://scrawlfx.com/show_image_carousel.php?filename=/2009/09/Star-Ocean-PS3-Scans_09-15_01.jpg&amp;cat=1&amp;pid=18253" alt="Star Ocean: The Last Ho..." width="150" height="130">
Star Ocean: The Last Ho...
   </a>
  </li>
 <li jcarouselindex="3" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal">
   <a href="http://scrawlfx.com/2009/09/shane-kim-announces-retirement-from-microsoft">
    <img src="http://scrawlfx.com/show_image_carousel.php?filename=/2009/09/shane-kim-retires.jpg&amp;cat=1&amp;pid=18240" alt="Shane Kim announces ret..." width="150" height="130">
Shane Kim announces ret...
   </a>
  </li>
  <li jcarouselindex="4" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal">
   <a href="http://scrawlfx.com/2009/09/the-first-15-minutes-of-bayonetta">
    <img src="http://scrawlfx.com/show_image_carousel.php?filename=/2009/09/bayonetta-first-15.jpg&amp;cat=1&amp;pid=18237" alt="The first 15 minutes of..." width="150" height="130">
The first 15 minutes of...
   </a>
  </li>
<!-- The content will be dynamically loaded in here -->
 </ul>
</div>

You try find its CSS andd ad that line to its existing css declarations or write a new one ...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.