When I toggle IE9's Compatibility VIEW on/off, my navbar shifts positions:
When Compatibility View: ON:
navbar is centred fine. :)
When Compatibility View: OFF:
navbar is shifted to the right slightly. :(
NOTE: I could NOT attach a screenshot due to certain site restrictions. :(
Obviously I would like to correct this, but cannot; thus, why I am posting here. :)
My CSS file looks as follows:
/*background image for outside area*/
#outside {
background-image:url('/images/body_bg.gif');
}
/*style for main area*/
#main {
font:16px "Trebuchet MS", arial, verdana, serif, monospace;
margin-left:auto;
margin-right:auto;
width:1020px;
border:5px outset darkgrey;
background-color:white;
}
/*background image*/
#bg {
background-image:url('/images/content_bg.gif');
}
/*horizontal list item widths*/
ul.two li{width:50%;}
ul.four li{width:25%;}
ul.five li{width:20%;}
/*submenu list item widths*/
ul.sfour li a{width:25em;} /*alternate value = 19.1em*/
ul.sfive li a{width:18.5em;} /*alternate value = 15.3em*/
/*top navigation bar*/
#topnav ul {
list-style-type:none;
margin-left:auto;
margin-right:auto;
width:100%;
overflow:hidden;
}
#topnav li {
float:left;
}
#topnav li a {
background-color:#606060;
color:white;
display:block;
font-size:large;
font-weight:bold;
font-variant:small-caps;
padding-top:4px;
padding-bottom:4px;
text-align:center;
text-decoration:none;
}
#topnav li a:active {
color:yellow;
}
#topnav li a:hover {
background-color:#888888;
}
/*topnav submenus*/
#topnav li ul {
display:none;
position:absolute;
}
#topnav li:hover ul {
display:block;
}
#topnav li:hover li {
float:none;
}
#topnav li:hover a {
background-color:#888888;
}
#topnav li:hover li a {
display:block;
font-size:small;
font-weight:normal;
font-variant:normal;
text-align:center;
text-decoration:none;
}
#topnav li:hover li a:hover {
background-color:#B0B0B0
}
/*page title*/
h1 {
border-bottom:3px solid black;
color:gray;
margin-left:auto;
margin-right:auto;
width:90%;
}
/*content*/
#content {
margin-left:auto;
margin-right:auto;
width:90%;
}
My _Layout.cshtml file is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>C4DP - #Page.Title</title>
<link href="#Href("~/Styles/Style.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/functions.js"></script>
<script type="text/javascript" src="/scripts/sorttable.js"></script>
</head>
<body id="outside">
<div id="main">
<img src="/images/title_c4dp.gif" alt="C4DP" width="100%"/>
<div id="bg">
<div id="topnav">#RenderPage("~/navbar_Top.cshtml")</div>
<h1>#Page.Title</h1>
<div id="content">
#RenderBody()
</div>
<div id="bottomnav">#RenderPage("~/navbar_Bottom.cshtml")</div>
</div>
<p id="copyright">© 2012 C4DP. All rights reserved.</p>
</div>
</body>
</html>
The navbar file looks as follows:
#if (WebSecurity.IsAuthenticated) {
if (!Roles.IsUserInRole("admin")) {
<ul class="four">
<li>News</li>
<li>Stats
<ul class="sfour">
<li>Earnings</li>
<li>Session Average</li>
<li>Ranking</li>
</ul>
</li>
<li>Profile
<ul class="sfour">
<li>Personal Info.</li>
<li>Change Password</li>
</ul>
</li>
<li>Logout</li>
</ul>
} else { //logged in as administrator
<ul class="five">
<li>News</li>
<li>Stats
<ul class="sfive">
<li>Earnings</li>
<li>Session Average</li>
<li>Ranking</li>
</ul>
</li>
<li>Admin
<ul class="sfive">
<li>Cardrooms</li>
<li>Events</li>
<li>Members</li>
</ul>
</li>
<li>Profile
<ul class="sfive">
<li>Personal Info.</li>
<li>Change Password</li>
</ul>
</li>
<li>Logout</li>
</ul>
}
} else {
// nav bar when NOT logged in
<ul class="four">
<li>Home</li>
<li>Rules</li>
<li>Login</li>
<li>Request Membership</li>
</ul>
}
Please help!
It turns out that my navbar needed the {display:inline;} and {padding:0;} attributes added to it to make it work.
Not being a real guru at this stuff, I assume the INLINE attribute prevented it from being "pushed over" by its neighbouring element, and that the PADDING:0; attribute ensured that the navbar fit properly in its parent element.
If a "real guru" (someone with more experience than me) could confirm my assumption, that would be much appreciated. Thank you in advance.
Related
I'm doing a site in HTML, the front-end part, but I want to do menu with between a logo.
I tried with following
position:absolute;
top:180px;
right:300px;
But it's not responsive and I think it's a bad way to do that, I tried with the % but when I change the size of the window the logo isn't centered.
I simply put the logo in a ul and used vertical-align but it doesn't work.
Do you have any idea ?
Thank you.
This is my code
The HTML code is
<body>
<div id="nav">
<ul id="menu1">
<li>Section 1</li>
<li>Section 2</li>
</ul>
<ul id="menu2">
<li><img src"image.png" alt=""/></li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</div>
and the CSS is
#nav
{
background-color:red;
width:550px;
height:150px;
}
#menu1, #menu2
{
list-style:none;
}
#menu1 li a
{
text-decoration:none;
font-size:18px;
float:left;
margin-top:50px;
margin-right:10px;
margin-left:10px;
}
#menu2 li a
{
text-decoration:none;
font-size:18px;
float:right;
margin-top:35px;
margin-left:10px;
margin-right:10px;
}
img
{
width:235px;
height:196px;
display:inline-block;
position:absolute;
margin-left:365px;
}
Already, the code for inserting the image is not good :
<img src="image.png" alt=""/>
Got an issue in ie7!, see the image below for how the dropdown menu looks. This works fine in every other browser but in ie7, as soon as you venture outside of the main li 'i.e.: the top link' the menu dissapears. I have already checked setting red boxes around everything and the li element is extending correctly to contain the sub menu but I cannot fix it. Any ideas?
Example of markup:
<nav>
<ul class="clearfix">
<li class="dropdown-link">Top Link
<ul class="clearfix dropdown-holder">
<li>
<div class="arrow"></div>
<div class="dropdown-holder-inner">
<ul class="dropdown">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>
CSS is quite heavy so I have put the Full Code on jsfiddle: http://jsfiddle.net/n2kgX/3/
image: http://i.stack.imgur.com/k24Du.png
I create a sample here: http://jsfiddle.net/jho1086/bbULV/5/, I change the html code and css a little bit because in my opinion container are too many. And I change the HTML5 tag (<nav>) because IE8 and below is not supported with HTML5, unless you have a fixed.
<div id="nav">
<ul class="clearfix sf-menu">
<li class="dropdown-link">Top Link
<div class="clearfix dropdown-holder">
<div class="arrow"></div>
<ul class="dropdown clearfix">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</div>
css
#nav { background:#6B6C6E; width:300px; margin:30px auto 0;}
.sf-menu li{float:left; font:12px/1em 'arial'; position:relative; padding:0 0 5px;}
.sf-menu li a{float:left;padding:12px 10px 5px;color:#fff; text-transform:uppercase;}
.sf-menu .dropdown-holder{
position:absolute;
left:-999em;
width:218px;
top:93%;
}
.sf-menu li:hover .dropdown-holder {left:-999em;}
.sf-menu li:hover .dropdown-holder {left:0;}
.arrow { background:url(arrow.png) no-repeat left top; width:32px; height:8px; position:relative; z-index:2; left:10px;}
.dropdown {
box-shadow:0 0 5px #bec2c8;
background:#fff;
height:100%;
position:relative;
z-index:1;
padding:10px 10px 5px;
}
.sf-menu .dropdown li{text-transform:capitalize; border-bottom:1px solid #ccc;}
.sf-menu .dropdown li.last-child { border:0;}
.sf-menu .dropdown a{
float:left;
padding:5px 0;
width:198px;
color:#333;
}
Hope it helps.
I have a feeling that Your example is overcomplicated.
This is the simplest implementation of nested menu (with hover) I know of:
<ul class="outer">
<li>
<p>TOP MENU</p>
<ul class="inner">
<li>link1</li>
<li>link2
<ul class="inner">
<li>link2.1</li>
</ul>
</li>
<li>link3</li>
</ul>
</li>
</ul>
With a little bit of css:
.outer {
border: 1px solid red;
width: 100px;
}
.inner {
display: none;
}
.inner li {
padding: 0 0 0 10px;
}
.outer li:hover > .inner {
display: block;
}
Tested on IE8 (in IE7 mode with IE7 Standards). Check here: http://jsfiddle.net/BUuyV/11/
Here is what you can do:
<!--[if lte IE 7]>
<style type="text/css">
nav ul li:first-child ul.dropdown-holder{
left: 0px;
top:-4px;
}
</style>
<![endif]-->
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
av been scratching my head because of this for too long.I would like to change the width and height of easy slider version 1.7,i have gone through the faqs part of this site after researching in so many other places and cudn't get a solution.Please help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pilot project</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
<link href="pilotp.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="v1.7.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li>Home</li>
<span>
Web Hosting
Domain Registration
</span>
</li>
<li>Consultancy
<span>
I.S Audit
Information Security
</span>
</li>
<li>
Career's
</li>
<li>
Contact Us
</li>
<li>
Testimonials
</li>
</ul>
</div>
</div>
<div id="container">
<div class="slidercontainer" style="background-color:fuchsia;width:800px;height:300px"><!--Will hold the slider -->
<div id="content" style="background-color:yellow;width:800px; height:299px;">
<div id="slider" style="background-color:pink;width:800px;height:298px;">
<ul>
<li><img src="images/01.jpg" alt="Css Template Preview" /></li>
<li><img src="images/02.jpg" alt="Css Template Preview" /></li>
<li><img src="images/03.jpg" alt="Css Template Preview" /></li>
<li><img src="images/04.jpg" alt="Css Template Preview" /></li>
<li><img src="images/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
this is the css
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider ul li, #slider2 ul li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:800px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:696px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls
{
height:28px;
margin-top:-20em;
margin-bottom:1em;
margin-right:0px;
margin-left:8px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}
ol#controls li
{
margin:0 15px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a
{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a
{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/*just added */
ol#controls { margin: -30px 0 0 0 !important; }
/* // Easy Slider */
See line 73-76 in the CSS file screen.css:
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
And also change the width of the container:
#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px; /* change this */
background:#fff;
margin-bottom:2em;
}
I have fixed it and it involved changing (increasing or decreasing) the width and height of
#slider ul li
{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:796px;
height:246px;
overflow:hidden;
}
The width and height of the images are of importance also.
Thank you for you assistance!
In javascript file (easyslider.js) remove:
obj.width(w);
obj.height(h);
I'm building a page that has a UL list with its items floated to create 2 columns. See http://epraxadev.com/valencia/food_truck_festival/index2.php
It works perfectly in Firefox, Chrome, Safari, IE8, and IE7. The only problem is in IE6. In IE6, instead of the list elements stacking in neat 2-row columns, with the thumbnail floated to the left and the description of the thumbnail floated to the right, the description somehow magically clears the floated thumbnail. Odd!
Here's the markup
<ul id="theTrucks">
<li>
<a class="thumb"><img src="images/trucks/dim-sum.png" width="78" height="79" alt="Dim Sum" /></a>
<div class="details">
<p>The Dim Sum Truck brings ample amounts of steamed shu mai and har gow dumplings, baked BBQ pork buns and more.</p>
<ul>
<li>Website »</li>
<li>Facebook »</li>
<li>Twitter »</li>
</ul>
</div>
</li>
<li>
<a class="thumb"><img src="images/trucks/border-grill.png" width="78" height="79" alt="Border Grill" /></a>
<div>
<p>The Border Grill Truck serves gourmet tacos, quesadillas, ceviches and more.</p>
<ul>
<li>Website »</li>
<li>Facebook »</li>
<li>Twitter »</li>
</ul>
</div>
</li>
<li class="clear"></li>
...repeats
And here's the CSS:
<style type="text/css">
ul#theTrucks { margin:1em 0 0; padding:0; }
ul#theTrucks li { width:320px; float:left; display:inline; margin-right:11px; list-style:none; overflow:hidden; }
ul#theTrucks li a.thumb { float:left; display:inline; width:78px !important; height:79px; margin:0; }
ul#theTrucks li div { width:230px; float:left; display:inline; padding:0; margin:0 0 0 11px; }
ul#theTrucks li div p { margin-bottom:0.5em; font-size:11px; line-height:1.2; }
ul#theTrucks li div ul { padding:0; margin:0; list-style:none; font-size:11px; line-height:1.2; }
ul#theTrucks li ul li { list-style-type:none; margin:0; }
ul#theTrucks li.clear { width:100%; float:none; display:block; margin:0; height:50px; clear:both; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
ul#theTrucks li div { width:100px; clear:none; }
</style>
<![endif]-->
Note the IE6-specific style that makes the div only 100px, so I know it's not because the containing li (at 320px) is too small to contain it.
Figured out the problem. The innermost unordered-list <li> tags were inheriting the width of the container <li> tags, which was 320px. I set the inner <li>s like so:
ul#theTrucks li ul li { width:230px; margin:0; }
and ta da! No more alignment issues =D
http://www.thedimsumtruck.com/Index/Home.html is a frigging mess! You can barely scroll the page in IE8.
I wanna place two child un-ordered lists side by side.
They are having Class Names L and R
Heres the relevant part of the HTML markup.
<ul class="SearchResult">
<li class="Pagination">
<a id="lnkPageNumber_top_1" class="ACTIVE" onclick="ShowPage(this.id);" style="cursor: pointer;">1</a>
<a id="lnkPageNumber_top_2" onclick="ShowPage(this.id);" style="cursor: pointer;">2</a>
</li>
<li>
<ul class="L">
<li style="border: medium none ;">
</li>
<li class="Pagination">
<a id="lnkImagePageNumber_1" class="ACTIVE" onclick="ShowImage(this.id);" style="cursor: pointer;">1</a>
<a id="lnkImagePageNumber_2" onclick="ShowImage(this.id);" style="cursor: pointer;">2</a>
<a id="lnkImagePageNumber_3" onclick="ShowImage(this.id);" style="cursor: pointer;">3</a>
<a id="lnkImagePageNumber_4" onclick="ShowImage(this.id);" style="cursor: pointer;">4</a>
</li>
</ul>
<ul class="R">
<li class="T">Rose Villa</li>
<li>
<span>
<strong>Price</strong>
: Rs. 2,000,000
</span>
</li>
<li>
<strong>Features</strong>
:
<img height="16" width="16" src="bed.png" alt="Beds:" title="Bedrooms"/>
3
<img height="16" width="16" src="bath.png" alt="Baths:" title="Bathrooms"/>
3
</li>
</ul>
</li>
</ul>
The styleSheet applied is this
ul.SearchResult { width:100%; list-style:none; }
ul.SearchResult li { margin:2px; height:200px; border:solid 1px #B5D335;clear:left; }
ul.SearchResult img { padding:0px; margin:0px; width:235px; height:156px; border:none }
ul.SearchResult li.Pagination { padding:5px; height:auto; }
ul.SearchResult li.Pagination a { color:#669900; font-weight:bold; }
ul.SearchResult li.Pagination a:hover { color:#FF9900; }
ul.SearchResult li.Pagination a.ACTIVE { color:#FF9900; border:solid 1px #B5D335; padding-left:3px; padding-right:3px; }
ul.SearchResult li ul {float:left; list-style:none; }
ul.SearchResult li ul.L { width:245px;} /* Set as Television set BG */
ul.SearchResult li ul.R { width:292px;}
ul.SearchResult li ul li { padding:3px; border:none; height:auto; border-bottom:dotted 1px #C9C9C9; }
ul.SearchResult li ul li.T { text-transform:uppercase; color:#44962A; font-weight:bold }
ul.SearchResult li ul li span { display:table-cell; min-width:125px; width:auto; }
ul.SearchResult li ul li a { color:#44962A; }
ul.SearchResult li ul li a:hover { color:#FF9900; }
But the side by side alignment is not working at all.
What could be wrong?
h?
P.S: and yeah, I saw floating divs in list items
Its DIV mentioned there and ul here. Is "clear:left" applicable for bot?
It may be duplicate post for experts in CSS, but I am not. So please bear with it [:)]
Edit Note:- To explain the stuff in detail heres an image
alt text http://www.yetanothercoder.com/img.jpg
Adding a clear:none to your UL's should sort it, so:
ul.SearchResult li ul {float:left; clear:none; list-style:none; }
floating will position the element, but to let other elements position next to it as oppose to underneath it you need to apply the clear:none :)
hope this helps!