• 0

Compatibility


Question

I've been using ways with CSS to position the divs I have on my page to have the same result on different browsers. Tried overflow, position, display, ..nothing.

Any suggestions to have my content to load as coded? It worked perfectly in Firefox 3.6.3, my screen resolution is 1440x900.

So, I was also wondering, what can I use to solve screen resolution issues?

Many thanks in advance. :)

UPDATE: This is how it's supposed to look: http://cl.ly/wao

Here's my code:

<div class="trailer" style="background-color: #252525; 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding-left: 10px; padding-top: 0px; padding-bottom: 10px; width: 500px;">

<br />
<br />
<div class="title" align="left">You'll Never Look at Dinner the Same Way Again<br />
<a class="intext" align="left" href="http://www.youtube.com/watch?v=5eKYyD14d_0" style="font-size: 30px;">Watch Trailer</a></div> 
</div>


<div class="trailer2" style="background-color: #252525; 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding-left: 10px; padding-top: 0px; padding-bottom: 10px; width: 415px; height: 208px;">

<br />
<br />
<div class="title" align="left">Sign the Petition<br />
<a class="intext" align="left" href="petition.html" style="font-size: 150px;">Now!</a></div> 
</div>

CSS:

div.trailer{
font-family: "Helvetica", "Lucida Grande", "Arial", "sans-serif";
font-size: 11px;
color: white;
margin-top: 20px;
margin-left: -450px;
}

div.trailer2{
position: absolute;
font-family: "Helvetica", "Lucida Grande", "Arial", "sans-serif";
font-size: 11px;
color: white;
margin-top: -218px;
margin-left: 750px;
}

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Do you have a preview of what it's supposed to look like? That way I don't go fixing what isn't broken, etc.

As far as resolving screen resolution issues.. Don't code for a specific resolution. Keep your content in a main container with a set width. eg:

<div id="wrap">
</div>

#wrap {
  width: 1000px;
  margin: 0 auto;
 }

Any positioned elements within that container will work in any browser, since they're within the 1000px scope.

Link to comment
Share on other sites

  • 0

Do you have a preview of what it's supposed to look like? That way I don't go fixing what isn't broken, etc.

As far as resolving screen resolution issues.. Don't code for a specific resolution. Keep your content in a main container with a set width. eg:

<div id="wrap">
</div>

#wrap {
  width: 1000px;
  margin: 0 auto;
 }

Any positioned elements within that container will work in any browser, since they're within the 1000px scope.

Thanks for reminding me and thanks for the code, it works now! Just need to change the margin for the second div.

+I just added a screen shot of how it's supposed to look like in the first post.

Link to comment
Share on other sites

  • 0

Nothing is attached in your first post and the code I gave was an example. You'd need to adjust according to your requirements and how your design is supposed to look.

Link to comment
Share on other sites

  • 0

Screenshot definitely helped :)

http://icupcake.org/dev/neowin/hajer.html

Cleaned up a few things (if you're going to use a stylesheet, stick with just that.. and not inline styles. Forgot about the style on the links but you can adjust accordingly.):

<style>
a {
	text-decoration: none;
    }
#wrap {
	width: 960px;
	margin: 0 auto;
	/* ignore below */
	font-family: arial;
	color: #fff;
	/* ignore above */
	}

div.trailer{
	float: left;
	width: 500px;
	padding: 0 0 10px 10px;
	background: #252525; 
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

div.trailer2{
	float: right;
	width: 415px; 
	height: 208px;
	padding: 0 0 10px 10px;
	background: #252525; 
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
</style>

<div id="wrap">
	<div class="trailer">
		<h1>You'll Never Look at Dinner the Same Way Again</h1>
		<p><a class="intext" align="left" href="http://www.youtube.com/watch?v=5eKYyD14d_0" style="font-size: 30px;">Watch Trailer</a></p>
	</div>


	<div class="trailer2">
		<h1>Sign the Petition</h1>
		<p><a class="intext" align="left" href="petition.html" style="font-size: 150px;">Now!</a></p>
	</div>
</div>

Extra resources:

http://www.elated.com/articles/css-floats/

http://www.css3.info/preview/multi-column-layout/

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Link to comment
Share on other sites

  • 0

Nothing is attached in your first post and the code I gave was an example. You'd need to adjust according to your requirements and how your design is supposed to look.

Fixed. And yeah, I did that now. Sorry, I didn't figure it out immediately. :blush:

Link to comment
Share on other sites

  • 0

Thanks so much! It's working great on all the browsers I'm testing on. Just need to get the second div's position right. They're sort of overlapping each other.

What's the best way to fix this? Do you think I should use margin again? http://cl.ly/vHg

Link to comment
Share on other sites

  • 0

What code are you using for trailer and trailer2?

Oh, silly mistake. Had an old property in for the second div. So sorry.

Thank you very much again. I really appreciate your help!! So happy right now. :D

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.