Browsers display problem

chrome and safari

Franco	#1 2011-03-30 15:17
Members	hi! i'm facing a problem, and i don't know where to look.... i'm making a new skin for my website (not new skin... i'm using the DS-Axxis one, modified) and it works fine in Firefox, Opera, and Internet Explorer... but when i open it with Chrome, or Safari the layout gets wrong.... this is the site http://web.vstanced.com

pieter	#2 2011-03-30 15:23
Team Thanked: 9 times	I'm using Chrome, but I don't see any problem. Maybe a screenshot, or tell us that is wrong? Which version of chrome? ... can we help you ...

Franco	#3 2011-03-30 16:12
Members	the skin have 2 columns news \| minichat,etc in opera, firefox and ie, i see it correctly, but in chrome and safari you can only see 1 column, and the links are in blue instead of the colours of the css

aiwass	#4 2011-03-31 10:06
Members Thanked: 1 time	The problem is here: .contentLayout .sidebar1 { position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 218px; } You are declaring that both should be align LEFT. Seperate them, since you now tell both to align left and since you have all class="Post" nested inside the .contentLayout it makes for bad parsing. .sidebar1 should be seperate from the other. Correct one would be: .contentLayout { position: relative; margin: 0; padding: 0; border: 0; float: right; overflow: hidden; width: XXXXpx; } .sidebar1 { position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 218px; } Take all that money that we spend on weapons and defences each year and instead spend it feeding and clothing and educating the poor of the world, which it would many times over, not one human being excluded, and we could explore space, together, both inner and outer, forever, in peace. - Bill Hicks https://evlear.com

aiwass

#4 2011-03-31 10:06

Members
Thanked: 1 time

The problem is here:

.contentLayout .sidebar1
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 218px;
}

You are declaring that both should be align LEFT. Seperate them, since you now tell both to align left and since you have all class="Post" nested inside the .contentLayout it makes for bad parsing. .sidebar1 should be seperate from the other.

Correct one would be:

.contentLayout
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: right;
  overflow: hidden;
  width: XXXXpx;
}

.sidebar1
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 218px;
}

Take all that money that we spend on weapons and defences each year and instead spend it feeding and clothing and educating the poor of the world, which it would many times over, not one human being excluded, and we could explore space, together, both inner and outer, forever, in peace. - Bill Hicks

https://evlear.com

Franco	#5 2011-03-31 12:19
Members	well..... if i do what you told the right column get at the bottom of the center, and it's still the same in chrome and safari... only in opera firefox, and IE change Added 8 minutes later .contentLayout .content { position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 655px; } .clear-float { float:none; clear:both; } /* end LayoutCell / / begin LayoutCell / .contentLayout .sidebar1 { position: relative; margin: 0; padding: 0; border: 0; float: right; overflow: hidden; width: 218px; } atm it's like this, as i said, works fine in opera, firefox, and internet explorer Added 13 minutes later:* the problem must be somewhere else... because the skin without any modification have the same problem Added 1 hours later: i should add, the font style isn't working either in chrome or safari..... and image of the problem http://img8.imageshack.us/img8/5576/sinttulo2vv.png
This post was edited by Franco (2011-03-31 14:48, 14 years ago)

Franco

#5 2011-03-31 12:19

Members

well..... if i do what you told the right column get at the bottom of the center, and it's still the same in chrome and safari... only in opera firefox, and IE change

Added 8 minutes later

	
		.contentLayout .content
{
 position: relative;
 margin: 0;
 padding: 0;
 border: 0;
 float: left;
 overflow: hidden;
 width: 655px;
}

.clear-float
{
 float:none;
 clear:both;
}
/* end LayoutCell */

/* begin LayoutCell */
.contentLayout .sidebar1
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: right;
overflow: hidden;
width: 218px;
}
	

atm it's like this, as i said, works fine in opera, firefox, and internet explorer

Added 13 minutes later:

the problem must be somewhere else... because the skin without any modification have the same problem

Added 1 hours later:

i should add, the font style isn't working either in chrome or safari.....

and image of the problem

http://img8.imageshack.us/img8/5576/sinttulo2vv.png

This post was edited by Franco (2011-03-31 14:48, 14 years ago)

aiwass	#6 2011-04-01 09:10
Members Thanked: 1 time	There is no need to declare the it like .contentLayout .sidebar1 just .sidebar1 as it is relative to the location of .contentLayout. Take a look at my CSS for my site which also has a sidebar which works on all browsers for ideas on how to solve it: .main{margin-bottom:18px;} .main#main-two-columns{background:url("http://cdn-icons.megamindmagazine.com/main-two-columns.png") repeat-y right top;} .main#main-two-columns .sidebar{width:260px;} .main#main-two-columns #main-left{width:671px;} .sidebar a{text-decoration:none;} .sidebar a:hover{text-decoration:underline;} #sidebar-1{margin-left:30px;} #sidebar-2{width:260px;} Link to the CSS: http://cdn-icons.megamindmagazine.com/2009.css Take all that money that we spend on weapons and defences each year and instead spend it feeding and clothing and educating the poor of the world, which it would many times over, not one human being excluded, and we could explore space, together, both inner and outer, forever, in peace. - Bill Hicks https://evlear.com
This post was edited by aiwass (2011-04-01 11:40, 14 years ago)

aiwass

#6 2011-04-01 09:10

Members
Thanked: 1 time

There is no need to declare the it like .contentLayout .sidebar1 just .sidebar1 as it is relative to the location of .contentLayout.

Take a look at my CSS for my site which also has a sidebar which works on all browsers for ideas on how to solve it:

.main{margin-bottom:18px;}
.main#main-two-columns{background:url("http://cdn-icons.megamindmagazine.com/main-two-columns.png") repeat-y right top;}
.main#main-two-columns .sidebar{width:260px;}
.main#main-two-columns #main-left{width:671px;}
.sidebar a{text-decoration:none;}
.sidebar a:hover{text-decoration:underline;}
#sidebar-1{margin-left:30px;}
#sidebar-2{width:260px;}

Link to the CSS:

http://cdn-icons.megamindmagazine.com/2009.css

This post was edited by aiwass (2011-04-01 11:40, 14 years ago)

Trustmaster	#7 2011-04-01 11:10
Administrators Thanked: 265 times	Please use the Pastebin for large code snippets. May the Source be with you!

Kort	#8 2011-04-01 11:12
Administrators Thanked: 217 times	I can't see any ideas there SED.by - создание сайтов, разработка плагинов и тем для Котонти

aiwass	#9 2011-04-01 11:42
Members Thanked: 1 time	#29259 Kort: I can't see any ideas there Well, mine works, Franco's doesn't so I've must have made something right. The issue is that it's badly declared in the CSS file what goes where, in Franco's case. Declaring what is left and right is essential Take all that money that we spend on weapons and defences each year and instead spend it feeding and clothing and educating the poor of the world, which it would many times over, not one human being excluded, and we could explore space, together, both inner and outer, forever, in peace. - Bill Hicks https://evlear.com
This post was edited by aiwass (2011-04-01 11:43, 14 years ago)

aiwass

#9 2011-04-01 11:42

Members
Thanked: 1 time

#29259 Kort:
I can't see any ideas there

Well, mine works, Franco's doesn't so I've must have made something right. The issue is that it's badly declared in the CSS file what goes where, in Franco's case. Declaring what is left and right is essential

This post was edited by aiwass (2011-04-01 11:43, 14 years ago)

Franco	#10 2011-04-01 14:50
Members	already fixed... it was other problem nothing to do with that part of the css... somewhere said {backgroundcolor} and i changed it to Background-color:#xxxxxxxx and everything started to work fine in all browsers