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

score 2 · Answer 1 · edited May 23 '17 at 12:15

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 '17 at 12:15

Community

1
1

answered Jan 06 '12 at 17:19

Wesley Murch

101,186
37
194
228

I agree with you Actually i am tried us string builder in C# to build a string similar to
hello
BUT string builder generates I agree with you Actually i am trying to string builder in C# to build a string similar to
hello
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 – Learning Jan 06 '12 at 18:59

score 0 · Answer 2 · answered Jan 06 '12 at 17:29

0

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

answered Jan 06 '12 at 17:29

Alan Weibel

392
3
11

I want to achieve this without using float:left, float will resolve but i cant use this... – Learning Jan 06 '12 at 18:21
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? – Alan Weibel Jan 06 '12 at 18:48

Cross Browser Issue with the CSS in ASP.net

2 Answers2