Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS cross-browser positioning problem

Posted on 2011-10-19
9
Medium Priority
?
278 Views
Last Modified: 2012-05-12
I have a problem with CSS positioning an image on a web page. If you go to http://gdcs.com/j455908uduij/index.php you can see the web page I am working on. The problem image is the blue vertical banner on the right margin. I can position the banner so that it is 1 pixel below the top horizontal banner for one web browser (for example, IE9). When I view it in other browsers (for example, Firefox), the banner is either too high or too low. I am generally aware of the box model issue with Internet Explorer, but I am having trouble getting code that works reasonably with IE and other browsers too.

If you view the source code of the page, you will see the CSS controlling the positioning of the banner. I have attached the code for both the web page and the CSS stylesheet for the website. I don’t think the stylesheet is an issue, but I included it anyway so that you can determine whether there is something in it which is affecting placement.

The horizontal positioning was not an issue, just the vertical.

Any suggestions you have would be appreciated.

index.php
index-template.css
0
Comment
Question by:gpinzino
  • 4
  • 4
9 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 36999507
Replace your html tag with the following:

 
<!--[if lt IE 7 ]> <html class="ie6 ie nojs" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 ie nojs" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 ie nojs" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" class="nojs"> <!--<![endif]-->

Open in new window


Now when you want to make a class specifically for IE, you can do this in your css:

.ie #right_panel{ position: absolute;  left: 594px; top: 8px;}

remove this:

#right_panel {
      <!--[if IE]>
        position: absolute;
        left: 594px;
        /*margin-top: -33px;*/
        top: 8px;
      <![endif]-->
}


You can also specify classes just for IE8 for example, by using the .ie8 class in front of your default class.
And you can use the nojs class for non javascript enabled browsers - but there's more to that, I can explain if you want.

If you want to be able to target other browsers individually, like webkit or mozilla, there's scripts for that.
0
 
LVL 1

Author Closing Comment

by:gpinzino
ID: 37002850
What an elegant solution! Cross-browser positioning gives me fits. It is nice to see a simple way to handle it.

Thanks for your help.
0
 
LVL 1

Author Comment

by:gpinzino
ID: 37003127
I guess I spoke too soon. I thought we had it. Here is the code I used for the HTML tag
 
<!--[if lt IE 7 ]>
	<html class="ie6 ie nojs" xmlns="http://www.w3.org/1999/xhtml">
<![endif]-->
<!--[if IE 7 ]>
    <html class="ie7 ie nojs" xmlns="http://www.w3.org/1999/xhtml"> 
<![endif]-->
<!--[if IE 8 ]>
    <html class="ie8 ie nojs" xmlns="http://www.w3.org/1999/xhtml"> 
<![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
	<html xmlns="http://www.w3.org/1999/xhtml" class="nojs"> 
<!--<![endif]-->

Open in new window


And here is the CSS I used.
 
#right_panel {
	position: absolute;
	left: 594px;
	margin-top: -27px;
	top: 0px;
}
.ie #right_panel{
	position: absolute;
	left: 594px;
	top: 4px;
}

Open in new window


Everything seemed to line up pretty well. But now, after several refreshes, and for no apparent reason, I am back to the old problem again. If I adjust the margin-top property in the #right_pane element, it affects rendering in both IE and other browsers. And if I adjust the top property in the .ie #right_pane element, it seems to have no effect.

This is the same issue I encountered with my original code.

What happened?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 37003354
#right_panel will affect everything.
.ie #right_panel will affect only ie.

so if you want to tweak the margin-top for ie, you should add it to .ie #right_panel. It will over-ride the first margin-top.

Does that make sense?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 37003372
adjustment:

margin has no effect on absolutely positioned elements.

you can only use top.

Since the only thing you're changing for IE is the top, all you need is this (sorry, shoulda done that the first time):

#right_panel {
        position: absolute;
        left: 594px;
        top: 0px;
}
.ie #right_panel{
        top: 4px;
}

Open in new window

0
 
LVL 43

Expert Comment

by:David S.
ID: 37004607
While just addressing the symptoms of the problem is sufficient in some cases, in this case it would be much better to just deal with the root of the problem. gpinzino, since you accepted a comment as the answer to this question already, I suggest you ask a "related question".


> margin has no effect on absolutely positioned elements.

Yes, it does. Assuming you're using a left-to-right language, if you don't set the right or bottom properties, then the right and bottom margins won't change the position of the element, however, the top and left margins will change the position of the element regardless of whether the top or left properties are set. However, if the bottom property is set to a value other than "auto", then the top margin won't change the position of the element. The same applies to the left margin if the right property is set to a value other than "auto". If you'd like to see an example, let me know.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 37005725
@Kravimir: margin is used to offset elements "relative" to other elements. It's counter intuitive to use margins on absolutely positioned elements even if there are cases where it has an effect. And it this case, using margin-top is not a good solution. Having said all that, the whole page page could benefit from some cleanup, and a lot of these problems would not even arise.
0
 
LVL 1

Author Comment

by:gpinzino
ID: 37008844
Thank you both for your discusssion of this issue. Because of your willingness to help, I am going to post a related question and open it up again for points. As you can see, my skills are limited and you are providing greater insight into the complexities of CSS.

Thanks again for your input.
0
 
LVL 1

Author Comment

by:gpinzino
ID: 37009050
OK. I don't think I need a follow-up question. I finally concluded that there must be a syntax error someplace in the HTML tags and my IE 9  browser was not being recognized. I realized that all control over the right panel was coming from the #right_panel element and not the the .ie #right_panel. Here is the revised HTML tags I creaed in place of the last HTML tag I had previously.

 
<!--[if gte IE 9]>
	<html class="ie+ ie nojs"  xmlns="http://www.w3.org/1999/xhtml" >
<![endif]-->
<!--[if ! IE 9]>
	<html xmlns="http://www.w3.org/1999/xhtml" >
<![endif]-->

Open in new window


It seems to have fixed the problem, although I have not yet thoroughly tested it.

Thank you both for your help.
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question