OK, i have no idea how it append, this form : http://xquives.kiaistudio.com/new-form/index.php have a two column field. But in IE7 it's in one column, but not in ie8 or 9 or FF of chrome. Can you please tell me what BAD i have done, or how to make IE behave like normal browser. I have take more that 2 hours testing... and i have NO IDEA where to look !
You're markup doesn't lend itself well to crappy ie7. You're markup looks generally like this:
<ul>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
</ul>
This is pretty error prone.
You'd be better off with parent containers that drive the columns like so:
<div style="width: 50%; float: left">
<ul>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
</ul>
</div>
<div style="width: 50%; float: left">
<ul>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
</ul>
</div>
EDIT: if you're married to this markup structure, you can hack ie7 by adding:
UL{*overflow:visible;}
.autocolumn LI {*width: 48%;}
The better thing to do is layout your columns in a way like i've described above
Related
navigation image here
how can i disable the green color there whenever i click in gallery page?
Home
<li class="dropdown mega-dropdown">
<a class="dropdown-toggle" href="Gallery.aspx">Gallery<span class="caret"></span></a>
<div class="pc-nav">
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3 col-md-push-3">
<ul>
<li class="dropdown-header" style="text-align:left">Company Trips</li>
<li style="text-align:left; visibility:hidden;"> 2016 - Vietnam</li>
<li style="text-align:left;"> 2015 - Guilin</li>
</ul>
</li>
</ul>
CSS here
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3 col-md-push-3">
<ul>
<li class="dropdown-header" style="text-align:left">Company Trips</li>
<li style="text-align:left;"> 2016 - Vietnam</li>
<li style="text-align:left;"> 2015 - Guilin</li>
</ul>
</li>
</ul>
I assume the current class indicates the column you have selected. Given the markup you provided in the comments, you can rewrite the rule like this to remove the background color:
.current {
background-color: transparent;
}
If you do not have access to the original code but wish to override it, you can supersede the background-color property like this:
.current {
background-color: transparent !important;
}
But in the end, if you don't wish there to be any special background color for the current column, you can just delete the entire block of code.
EDIT
Based on your feedback, I assume you want to highlight the names of the countries in the list but not the first item of the list. In that case, you can target them like this:
ul.dropdown-menu ul li:not(.dropdown-header) {
background-color: #00b200;
}
I'm trying to display a li when an another li from a different ul is hovered , but i didn't have success until now.Can you help me ? Thank you !
HTML
<div id="parent">
<ul id="child1">
<li id="child1a">bla bla</li>
<li id="child1b">bla bla</li>
<li id="child1c">bla bla</li>
<li id="child1d">bla bla</li>
</ul>
<ul id="child2">
<li id="child2a">bla bla</li>
<li id="child2b">bla bla</li>
<li id="child2c">bla bla</li>
<li id="child2d">bla bla</li>
</ul>
</div>
CSS
#child2a {display:none;}
#child1a:hover #child2a {display:block}
https://jsfiddle.net/t9y4wu61/
You will need more than just CSS to solve this. But first of all, your approach contains a logical mistake:
#child1a:hover #child2a {display:block}
Adding a space between selectors means that they are nested in the markup. So your CSS would work just fine for something like this:
<div id="parent">
<ul id="child1">
<li id="child1a">
<span id="child2a">bla bla</span>
</li>
</ul>
</div>
But of course, this is not what you want. To get things working, you will need JavaScript. I recommend jQuery for this:
$(document).ready(function() {
$("#child1a").mouseover(function() {
$("#child2a").show();
};
$("#child1a").mouseoout(function() {
$("#child2a").hide();
};
}
Please note that I did not test this code, so it might have some issues. However it might lead you into the right direction. See the linked jQuery website for reference and code examples.
I can't seem to figure out how to change the height of list items in a jquery mobile navbar. I've looked through all the css and tried changing everything I've found but nothing has worked so far. Hope someone can help!
Here's the code:
<div data-role="page" data-theme="a">
<div data-role="header" style="background: url('../images/stripe.gif') repeat top left;">
<div data-role="navbar">
<ul class="custom-navbar">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
Here's a link to see how it's rendering. The 7 items at the top (the days of the week), as you can see have lots of space above and below them inside their borders. I want much less space there.
<ul class="custom-navbar ui-grid-f">
<li class="ui-block-a"><span class="ui-btn-inner"><span class="ui-btn-text">Sun</span></span></li>
<li class="ui-block-b" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Mon</span></span></li>
<li class="ui-block-c" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Tue</span></span></li>
<li class="ui-block-d" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Wed</span></span></li>
<li class="ui-block-e" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Thu</span></span></li>
<li class="ui-block-c ui-block-f" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Fri</span></span></li>
<li class="ui-block-g" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Sat</span></span></li>
</ul>
There is your initialized grid. You can see that I added padding-left: -5px to all but the first <li> element to take away the space between them. I would either use a class to add the margin to the elements or if you are targeting browsers that support CSS3 then you can use the :nth-child() selector to get all but the first <li> element.
Update
Here is how to change your code so that it will look like the above code after jQuery Mobile initializes it:
<ul class="custom-navbar">
<li>Sun</li>
<li style="margin-left: -5px;">Mon</li>
<li style="margin-left: -5px;">Tue</li>
<li style="margin-left: -5px;">Wed</li>
<li style="margin-left: -5px;">Thu</li>
<li style="margin-left: -5px;">Fri</li>
<li style="margin-left: -5px;">Sat</li>
</ul>
The page footer added as fixed icon based navbar. but when it come to display, naevbar converted to a grid layout. that is, three columns and two rows grid layout.
Following script I have used for footer nevBar,
<div data-role="footer" class="nav-footer" data-position="fixed">
<div data-role="navbar" class="nav-footer" data-grid="d">
<ul>
<li>H</li>
<li>M</li>
<li>A</li>
<li>T</li>
<li>S</li>
</ul>
</div>
</div>
but it render as follows.
<div class="nav-footer ui-bar-a ui-footer ui-footer-fixed fade ui-fixed-overlay" data-position="fixed" data-role="footer" role="contentinfo">
<div class="nav-footer ui-navbar" data-grid="d" data-role="navbar" role="navigation">
<ul class="ui-grid-b">
<li class="ui-block-a">XXX</div>
<li class="ui-block-b">...</div>
<li class="ui-block-c">...</div>
<li class="ui-block-a">...</div>
<li class="ui-block-b">...</div>
</ul>
</div>
</div>
Content of each li as follows.
XXX ==>
<li class="ui-block-a">
<a id="home" class="ui-btn ui-btn-icon-top ui-btn-up-a" data-icon="custom" href="#" data-theme="a">
<span class="ui-btn-inner">
<span class="ui-icon ui-icon-custom"></span>
<span class="ui-btn-text">H</span>
</span>
</a>
</li>
My output shows as two rows and three colomns grid. Please can you find the reason.
Check this out: http://jquerymobile.com/test/docs/buttons/buttons-grouped.html
<div data-role="controlgroup" data-type="horizontal"> your items </div>
You have specify the classes on your li elements to tell how many columns you want
<ul class="ui-grid-b">
<li class="ui-block-a">XXX</div>
<li class="ui-block-b">...</div>
<li class="ui-block-c">...</div>
<li class="ui-block-D">...</div> <--D here, column 4
<li class="ui-block-E">...</div> <--E here, column 5
</ul>
Default number of columns is three I guess, which is why the last two were pushed to the next row.
I have my website here - http://thezoomer.net/clubroyale/
if you look at the submenu from ABOUT US or at the CONTACT US menu item with Firebug, you will see Cufon draws unnecessary canvases.
Any idea ? Thanks!
A solution I found is to get rid of all whitespace in the HTML, so this:
<li class="dir nav-item">ABOUT US
<div class="subnav-con">
<div class="nav-top">
</div>
<ul class="nav">
<li class="nav-item">HISTORY</li>
<li class="nav-item">VISION</li>
<li class="dir nav-item">TEAM
</li>
<li class="nav-item">CLIENTS</li>
<li class="nav-item">TESTIMONIALS</li>
<li class="nav-item">PRESS</li>
<li class="nav-item">FAQ</li>
</ul>
<div class="nav-bottom"></div>
</div>
</li>
becomes this:
<li class="dir nav-item">ABOUT US<div class="subnav-con"><div class="nav-top"></div><ul class="nav"><li class="nav-item">HISTORY</li><li class="nav-item">VISION</li><li class="dir nav-item">TEAM</li><li class="nav-item">CLIENTS</li><li class="nav-item">TESTIMONIALS</li><li class="nav-item">PRESS</li><li class="nav-item">FAQ</li></ul><div class="nav-bottom"></div></div></li>
There's possibly a neater way involving CSS, but I'm not going to look for it unless you really want me to.