Jump to content
xisto Community
Sign in to follow this  
Followers 0
matak

Cross Browser Incompatibillity Css How to make this work right...

By matak, in Programming

Recommended Posts

matak    2

matak
Posted

Ok i found a good tut on Xisto for making "round" textboxes with CSS, and i used it for my new site..

Now i have this situation

When you look at My Newsite in Firefox that blue textbox is aligned in center, but in explorer it goes to left of middle div tag..

Argh.. I was really hopping this wouldn't make problems, but i guess i'm just not lucky...

And when i just take textbox with margin: auto; it aligns perfectly in both browsers

Look Here

Now this is the code for first example

<html><head><title>Internet House.beta</title><style type="text/css">body {	background-color: #000000;}.top {	position: static;	width: 890px;	height: 145px;	background-color: #ffffff;	display: block;}.header {	margin-left: 145px;}.wraper {	position: relative;	width: 890px;	height: 100%;	background-color: #ffffff;}.menul {	position: absolute;	width: 145px;	height: 100%;	background-color: #333333;}.content {	position: absolute;	width: 600px;	height: 100%;	margin-left: 145px;	background-color: #cccccc;}.menur {	position: absolute;	width: 145px;	height: 100%;	margin-left: 745px;	background-color: #333333;}.bottom {	position: relative;	width: 890px;	background-color: #ffffff;}.textarea {	margin:10px auto 0 auto;	padding:0;	width:300px;	background:#B4D5ED;}.topleft{	margin:0;	padding:0;	background:url(topleft.jpg) top left no-repeat;}.topright{	margin:0;	padding:0;	background:url(topright.jpg) top right no-repeat;}.bottomright{	margin:0;	padding:0;	background:url(bottomright.jpg) bottom right no-repeat;}.bottomleft{	margin:0;	padding:0;	background:url(bottomleft.jpg) bottom left no-repeat;}p.text {	font:12px/16px verdana, arial, serif;	color: #000000;	margin:0;	padding:10px;	text-align:justify; 	}</style></head><body><div class="top"><div class="header"><img src="img/header.png"></img></div></div><div class="wraper"><div class="menul">Meni Lijevi</div><div class="content">James Webb Young wrote about 40 years ago in his little gem "A technique for producing Ideas": An idea is nothing more nor less than a new combination of old elements.<div class="textarea"><div class="topleft"><div class="topright"><div class="bottomright"><div class="bottomleft"><p class="text">Things in the future have changed dramatically. I bought Canon A40 in year 2002 and took several interesting pictures with it. Later I bought Sony DSC S-75 cause I liked its macro potencial. But I sold it quickly cause it had lot of noise in images and awful white balance. Just before end of year 2003 I bought myself second hand Canon G3 which I am still using. Canon G3 is very good prosumer camera with pleasant results.</p></div><!--bottomleft--></div><!--bottomright--></div><!--topright--></div><!--topleft--></div><!--textarea--></div><div class="menur">Meni Desni</div></div><div class="bottom">Boootooom</div></body></html>

How to arrange all of this to work just fine...(don't mind those mising images they are not important)

Thank you...

Share this post

Link to post
Share on other sites

matak    2

matak
Posted

Ok i found a good tut on Xisto for making "round" textboxes with CSS, and i used it for my new site..
Now i have this situation

When you look at My Newsite in Firefox that blue textbox is aligned in center, but in explorer it goes to left of middle div tag..

Argh.. I was really hopping this wouldn't make problems, but i guess i'm just not lucky...

And when i just take textbox with margin: auto; it aligns perfectly in both browsers

Look Here

Now this is the code for first example

<html><head><title>Internet House.beta</title><style type="text/css">body {	background-color: #000000;}.top {	position: static;	width: 890px;	height: 145px;	background-color: #ffffff;	display: block;}.header {	margin-left: 145px;}.wraper {	position: relative;	width: 890px;	height: 100%;	background-color: #ffffff;}.menul {	position: absolute;	width: 145px;	height: 100%;	background-color: #333333;}.content {	position: absolute;	width: 600px;	height: 100%;	margin-left: 145px;	background-color: #cccccc;}.menur {	position: absolute;	width: 145px;	height: 100%;	margin-left: 745px;	background-color: #333333;}.bottom {	position: relative;	width: 890px;	background-color: #ffffff;}.textarea {	margin:10px auto 0 auto;	padding:0;	width:300px;	background:#B4D5ED;}.topleft{	margin:0;	padding:0;	background:url(topleft.jpg) top left no-repeat;}.topright{	margin:0;	padding:0;	background:url(topright.jpg) top right no-repeat;}.bottomright{	margin:0;	padding:0;	background:url(bottomright.jpg) bottom right no-repeat;}.bottomleft{	margin:0;	padding:0;	background:url(bottomleft.jpg) bottom left no-repeat;}p.text {	font:12px/16px verdana, arial, serif;	color: #000000;	margin:0;	padding:10px;	text-align:justify; 	}</style></head><body><div class="top"><div class="header"><img src="img/header.png"></img></div></div><div class="wraper"><div class="menul">Meni Lijevi</div><div class="content">James Webb Young wrote about 40 years ago in his little gem "A technique for producing Ideas": An idea is nothing more nor less than a new combination of old elements.<div class="textarea"><div class="topleft"><div class="topright"><div class="bottomright"><div class="bottomleft"><p class="text">Things in the future have changed dramatically. I bought Canon A40 in year 2002 and took several interesting pictures with it. Later I bought Sony DSC S-75 cause I liked its macro potencial. But I sold it quickly cause it had lot of noise in images and awful white balance. Just before end of year 2003 I bought myself second hand Canon G3 which I am still using. Canon G3 is very good prosumer camera with pleasant results.</p></div><!--bottomleft--></div><!--bottomright--></div><!--topright--></div><!--topleft--></div><!--textarea--></div><div class="menur">Meni Desni</div></div><div class="bottom">Boootooom</div></body></html>

How to arrange all of this to work just fine...(don't mind those mising images they are not important)

Thank you...


For now i have arranged it for textbox to have

position: absolute;
left: 10px;
width: 580px;

and it looks ok in both browsers. but if somebody could point me to what am i doing wrong, so that i can learn, beacouse i would like to start using percentages instead of pixels, and i need some guidelines..

ok.. Thx anyway :lol:

Share this post

Link to post
Share on other sites

biscuitrat    0

biscuitrat
Posted

First, it's "wrapper", not "wraper". That could be interpreted incorrectly!

 

Second, use <div id=""> </div> for elements that will not be repeating throughout one page. You can use class, but class is usually reserved for inline elements.

 

Third, (this is inconsequential as well), you can abbreviate colors in the following ways: #cccccc (6 of the same) can become #ccc. #ff00ff can become #f0f. Now, on with the analysis.

 

For starters, why is your DOCTYPE in the middle of your page? The doctype should be the first thing on your page. Also, link elements belong in the <head> tag, not in the body of the page. You also have more than one DOCTYPE...and what's this I see? HTML 4.01 transitional?? That's like taking a garbage bag with a few holes in it and punching more into it, just because you can. Validate your HTML (validator.w3.org) before you continue. And go with HTML 4.01 Strict, if you're going to go with anything.

 

You utilize almost no margins and padding in your CSS. Why is that? I know you can specify everything with width and height, but it's unusual (to me) to completely avoid using margins and padding. Now, margin: auto; basically tells the browser to completely center the box. It seems like the box is being centered inside the div...I don't see much of a problem. But I do recommend this: clean up your structure! There's probably a better way to use rounded corners than to create a separate div for each one. It doesn't look like your structure is going to be very fluid, so it shouldn't matter.

 

Percentages are pretty easy. I made up a conversion chart for all my fonts and their related percentage value. For layouts, though, it's just simple math. To have something be 100% implies that it will be a normal full size - OR - take up the entirety of the browser window. I experiment with my percentages. I will set varying widths and heights until I find some combination that I like. Percentages are highly recommended because of scalability throughout browsers. It won't solve any design issues you have stated in this post, but it may prevent future errors. And designing a site that works in all browsers instead of one, and having hacks for the others (whatever they might be), is a laudable act. Good work :lol:

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept