Hi there
this is my jsfiddle
I have try to make a dropdown menu When I try to show output in different window then in (Mozilla and Internet Explorer) its Working fine like this
and In Chrome and Opera I am getting out like this
Whats wrong with this css?
(Copy paste this file in Notepad and test it on different browser)
Hi,
I think you are mistaken as it looks the same in all browsers. It all depends how wide the window is open as to whether the image drops or not.
If you want the right image on the same line as the menu then do something like this/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background-color: #F2D0EE;
}
.header {
margin-left: auto;
margin-right: auto;
width:70%;
}
.header {
background-color: #927EC4;
}
.header {
min-height: 20%;
}
.dropdownmenu a {
color:black;
}
.header {
padding-top:50px;
}
.dropdownmenu ul {
list-style-type: none;
text-align: center;
}
.dropdownmenu ul a {
text-decoration: none;
padding: 0 1em;
}
.dropdownmenu ul li {
display: inline-block;
font-size: 100%;
margin: 10px 0 0;
margin: 0 10px 5px 0;
background-color: #FFFFFF;
}
.dropdownmenu ul li {
position: relative;
}
.dropdownmenu ul li a {
display:block;
padding:5px 15px;
}
.dropdownmenu li:hover {
background-color: #9EF781;
}
.shopingblock {
float: right;
background-color: purple;
}
.dropdownmenu {
background-color: red;
padding:1px 0 0;
}
.dropdownmenu:after{
content:"";
display:table;
clear:both;
}
</style>
</head>
<body>
<div class="header">
<div class="shopingblock"> <img src="#" width="50" height="50" class="cartImage"/>
<p>Cart</p>
</div>
<div class="dropdownmenu">
<ul>
<li><a href="<c:url value='/home'/>">Home</a></li>
<li><a href="<c:url value='/viewProducts?category=Men'/>">Men</a></li>
<li><a href="<c:url value='/viewProducts?category=Women'/>">Women</a></li>
<li><a href="<c:url value='/viewProducts?category=Electronics'/>">Electronics</a></li>
<li><a href="<c:url value='/viewProducts?category=ComputerGame'/>">Computer Game</a></li>
<li><a href="<c:url value='/viewProducts?category=Sports'/>">Sports Health</a></li>
<li><a href="<c:url value='/viewProducts?category=Appliances'/>">Appliances</a></li>
<li><a href="<c:url value='/contactUs'/>">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
I want to do something like this When I sort the window then red color also split to all parts
I want that red color should be in some part and purple is different
these are different screen when I Small Browser Window
window-2
window-3
First I want that red length block is separte and purple length block is separte
Now You can see that red block length is not shorten while I small a browser window
Hi,
I’m not sure if I follow but if you want the menu not to wrap then just give it a margin to avoid the image.
e.g.
.dropdownmenu {
margin-right:50px;
}
Or you could just add overflow:hidden to the above instead but as you mentioned a dropmenu I assumed you were going to have flyouts and overflow:hidden would be of no use.
BINGO!!!
you understand it right
Now red block is not wrapping with other blocks
but problem is purple block is not displaying equal length to the red block as you can see in below diagram
Window-2
You didn’t ask for that! 
Elements won’t automatically match neighbours unless you do something special to make it happen. You will need to change it all around again and use display:table and table-cell properties to achieve that effect (ie8+).
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: #F2D0EE;
}
.header {
margin: auto;
display:table;
width:70%;
background: #927EC4;
height:20%;
padding-top:50px;
}
.dropdownmenu a {
color:black;
}
.dropdownmenu ul {
list-style-type: none;
text-align: center;
margin:0;
padding:0;
}
.dropdownmenu ul a {
text-decoration: none;
padding: 0 1em;
}
.dropdownmenu ul li {
display: inline-block;
font-size: 100%;
margin: 10px 0 0;
margin: 0 10px 5px 0;
background-color: #FFFFFF;
}
.dropdownmenu ul li {
position: relative;
}
.dropdownmenu ul li a {
display:block;
padding:5px 15px;
}
.dropdownmenu li:hover {
background-color: #9EF781;
}
.shopingblock {
display:table-cell;
vertical-align:top;
width:1px;
background-color: purple;
}
.dropdownmenu {
background: red;
display:table-cell;
vertical-align:top;
}
.dropdownmenu:after{
content:"";
display:table;
clear:both;
}
</style>
</head>
<body>
<div class="header">
<div class="dropdownmenu">
<ul>
<li><a href="<c:url value='/home'/>">Home</a></li>
<li><a href="<c:url value='/viewProducts?category=Men'/>">Men</a></li>
<li><a href="<c:url value='/viewProducts?category=Women'/>">Women</a></li>
<li><a href="<c:url value='/viewProducts?category=Electronics'/>">Electronics</a></li>
<li><a href="<c:url value='/viewProducts?category=ComputerGame'/>">Computer Game</a></li>
<li><a href="<c:url value='/viewProducts?category=Sports'/>">Sports Health</a></li>
<li><a href="<c:url value='/viewProducts?category=Appliances'/>">Appliances</a></li>
<li><a href="<c:url value='/contactUs'/>">Contact Us</a></li>
</ul>
</div>
<div class="shopingblock"> <img src="#" width="50" height="50" class="cartImage"/>
<p>Cart</p>
</div>
</div>
</body>
</html>
Thanks This code is awesome
But can you see this issue I am getting different output in different browser
one Mozilla Firefox and IE
I am getting this output
and In Chrome and Opera I am getting this output
In Chrome and Opera “Contact Us” section is on bottom and in Mozilla and IE it is on same line
How to fix this issue?
also one more thing in Chrome and Opera you can see both element of shoping block has equal height while in Mozilla and IE this is not
The “issue” is being caused by the limited container width and the difference in the way browsers render fonts. You have several choices:
Increase .header width
.header {
margin: auto;
display:table;
width:70%;
width:80%; /* TRY ME */
background: #927EC4;
height:20%;
padding-top:50px;
}
OR decrease margin between list items
.dropdownmenu ul li {
display: inline-block;
font-size: 100%;
margin: 10px 0 0;
margin: 0 10px 5px 0;
margin:0 4px 5px; /* TRY ME */
background-color: #FFFFFF;
}
OR reduce padding in anchors
.dropdownmenu ul li a {
display:block;
padding:5px 15px;
padding:5px 12px; /* TRY ME */
}
Pick one or more
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.