Vaibhav

We both are working on the same theme. Since your account has to be verified before posting something on this forum, Drew1243 made a post using my account.

Thanks a lot. I'll try this out and let you know

I'm currently working on a theme for iDevotees. They use Wordpress and the owner wants a dropdown menu. The menu has links to the homepage, other pages and categories on the top level and then the dropdown level shows the subcategories of the highlighted category. I found a way to do it but the code spread the dropdown level across the page and made the page far too wide. To see what I mean, check out suburbanjunkie.zxq.net You can notice at the bottom: the horizontal sliebar, we want to remove it. It would be awesome of someone could tell me what's wrong or offer an alternative solution. HTML/PHP: <ul id="nav2" class="clearfloat"> <li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li> <?php wp_list_pages('title_li=&depth=1'); wp_list_categories('orderby=name&title_li=&depth=1'); $this_category = get_category($cat); if (get_category_children($this_category->cat_ID) != "") { echo "<ul>"; wp_list_categories('orderby=id&show_count=0&title_li=&child_of=&use_desc_for_title=1&depth=1'.$this_category->cat_ID); echo "</ul>"; } ?></ul> CSS: #nav2{ display: block; font-size:1.1em; height:50px; width:100%; padding: 0 50%;}[/size][/font][/color] #nav2, #nav2 ul { line-height: 1; list-style: none;}#nav2 a ,#nav2 a:hover{ border:none; display: block; text-decoration: none;}#nav2 li { float: left; list-style:none; text-decoration: none; font-size: 15px; padding: 5px 5px; border-radius: 5px; margin: 10px 5px; box-shadow: 3px 3px 6px #CCC inset; font-family: Myriad Pro, sans-serif; background: #d3d5d7; font-weight: 100;}#nav2 li:hover { background: #59a4ff; box-shadow: 3px 3px 6px #4787d5 inset;}#nav2 a,#nav2 a:visited { display:block; font-weight:bold; padding:6px 12px;}#nav2 a:hover, #nav2 a:active { color:#fff; text-decoration:none}#nav2 li ul { height: auto; left: 100px; position: absolute; z-index:999; width: 100%; padding: 0 50%;}#nav2 li li { width: auto;}#nav2 li li a,#nav2 li li a:visited { font-weight:normal; font-size:0.9em;}#nav2 li li a:hover,#nav2 li li a:active { color:#fff;}#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul { left: 30px;}

Thanks! max-height:100% actually works

Google Chrome. Also what syntax do you use? This?: img {padding: 10px 5px;max-width: 600px;max-height: 100%;} Any help would be appreciated

Hi everyone, This is my first post here, so probably welcome me. Okay so on topic, I have a tech blog where we have multiple number of writers making posts. To make adding images easier, I used the max-width property and set it according to the content box width. The problem I'm facing is though, that the height doesn't change while the width does, thus the picture gets distorted and out of proportion which isn't pleasing AT ALL. I use this coding in my stylesheet: img {padding: 10px 5px;max-width: 600px;max-height: 100%;} I've also tried using auto and inherit instead of 100% and just height instead of max-height but nothing helped. I'm using a wordpress blog by the way. Thanks in advance