CSS Layout appearing differently depending upon hosting server

Report · Dec 11, 2011

I have designed my site with layout defined in CSS file.

It contains Padding, Margin, Border etc as standard code lines.

I have tested it on IE 9 from my PC.

However I have noted that the layout appears to be slightly different when the site is hosted on localhost (II7) as compared to on the live Remote Production Site Server. The margins, padding etc appear to be different between the two scenarios of site hosting.

Please advise as to when the client browser is the same, why is the layout rendered differently between the two types of hosting. Is the CSS layout dependent upon the IIS version or the Zone of the browser which is used to view the site.

Report · Dec 11, 2011

That wouldn't make sense unless something is missing in the remote environment. Since we can't see the page can you verify that all links are in order and pointing to relative locations (and not something on your hard drive) and that all files are uploaded? If you need further help we will need to see a link to the page in question and since the remote environment is the issue it should be easy to troubleshoot.

Report · Dec 12, 2011

Please note that the pages served from the remote servers work on Chrome appear very similar to that from the localhost, but when viewed on IE the locally served pages appear to be different that served from remote server.

If this might give you some clue on the issue.

I checked and found that the probable problem is as described below.

I have indicated the style for a.link and a.visited in the starting of the css file as

a:link { color:#009900; text-decoration: underline;}    
 a:visited { color: #4E5869; text-decoration: underline;}

Later in the css file, I have defined styles for cbt, cbt a, cbt a:link and cbt a:visited separately. where anchor link a is nested inside cbt tag like

the styles for cbt etc is as below:


 cbt { display:block;
  float:none; 
 position: relative; 
 margin:5px 2px; 
 padding-left:1px; 
 padding-right:1px; 
 padding-top:5px; 
 padding-bottom:5px; 
 z-index:4; 
 clear:both; } 

 
 cbt a, cbt a:link { 
 font-size: 1em; 
 text-decoration:none; 
 text-align:justify; 
 text-justify:inter-word; 
 font-weight:normal; 
 word-wrap:break-word; 
 color:#00C; 
 display:block; } 
 
 cbt a:visited { color:#CC0033; }

Inspite of the above codes, the anchor link a inside cbt tag is not taking the styles defined with cbt a, cbt a:link, but is instead taking styles defined in a:link initially.

Why is it so?

Hence they are behaving as inline elements in IE9 when hosted on remote server by taking the initial style defined.

However,when the same page are viewed on localhost in IE9, the links behave as block elements (taking the later defined styles). The links also behave as block elements inside Chrome browser when viewed on localhost as well as on remote server. In this situation the links are taking the styles defined later in the css file.

Please advise on why the css behaviour is so erratic.

Report · Dec 15, 2011

Do you think it might be that some browsers are not recognizing the <cbt> tag? I do.

Report · Dec 15, 2011

I didnt get you.

Please explain.

Thanks

Report · Dec 15, 2011

<cbt> is not a valid HTML tag. I think that your selector -

cbt a { ... }

is not going to work reliably.