Cross Browser Issue with the CSS in ASP.net

Question

Below HTML Displays Menu in same line for FF latest version & Google Crome browsers but in IE9 it it show them in separate lines.

I want menu to be display in one line. I am not sure what i should do to fix this i tried several properties but didn't work as it works in FF & Crome. Any help in this would be appreciated

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
{
  $("p").click(function()
{
    $(this).hide();
  });
});
 </script>

<style>
.test
{
    background-color: #B4984E;    
    border: 1px #ffffff solid;
    color: #fff;       
 line-height: 1.35em;
    padding: 4px 23px;
    text-decoration: none;      
  /* white-space: nowrap; display: block;*/       
 display: inline-block; 
    cursor:pointer;    
}    
</style>    
</head>
<body>    
<div class="test" href="http://Default.aspx?PageId=3&Language=en-US">HOME</div>    
<div class="test" href="http://PageId=5&Language=en-US">PROFILE</div>    
</body>
</html>

Update: I cant use float:left in this one

Community · Accepted Answer · 2017-05-23 12:15:35Z

2

Most important thing: <div>s are not links, and do not have hrefs. Use the anchor tag: <a>.

Next most important thing: You need a doctype or your page will be rendered in "quirks mode" (in other words, very badly). The standard doctype these days is the html5 doctype, which is simply:

<!doctype html>

Put this at the top of your page, before the <html> tag.

That alone might solve your issue, but as a wild guess you might want to try float:left instead of display:inline-block (although that should already work).

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Jan 6, 2012 at 17:19

No Results Found

103k38 gold badges199 silver badges232 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Learning Over a year ago

I agree with you Actually i am tried us string builder in C# to build a string similar to <div class="test" onclick="location.href='example.com';" > hello</div> BUT string builder generates I agree with you Actually i am trying to string builder in C# to build a string similar to <div class="test" onclick='location.href='example.com';' > hello</div> which doesn't work NOTICE the difference after onclick=' its ads single code rather than double quote somehow which doesn't work properly. I will implement other part of your suggestion & see if it works. Thanks

Alan Weibel · Accepted Answer · 2012-01-06 17:29:13Z

0

Give your divs that you want to be next to each other float:left properties and give them widths.

answered Jan 6, 2012 at 17:29

Alan Weibel

4024 silver badges11 bronze badges

2 Comments

Learning Over a year ago

I want to achieve this without using float:left, float will resolve but i cant use this...

Alan Weibel Over a year ago

You're probably going to get a bunch of answers telling you to use floats. Maybe you should let everyone know in your description that you do not want to use floats and why?

Collectives™ on Stack Overflow

Cross Browser Issue with the CSS in ASP.net

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related