CSS - Text Styling Problem In Sliding Door Menu

it's best to get a visual of this one: www.viportals.com

i'm talking about the buttons under the top banner. if you hover "Games", a drop down list appears.

there is a 1pixel line between the "Games" button and its dropdown list (when you hover the "Games" button) which i want to get rid of, but can't.

in IE, there are many horrible problems, probably due to the display:inline-block of the li a. the buttons are too tall and hang down below the bottom line of the horizontal bar, and the dropdown menu appears beside the "Games" button.

i tried
css Code:
Original - css Code #sddm ul li a { padding-top: 0; padding-bottom: 0; margin-top:0; margin-bottom:0; }

  

 #sddm ul li a {


             padding-top: 0;


             padding-bottom: 0;


             margin-top:0;


             margin-bottom:0;


         } 

in my separate ie css file, but its the same here is all the code if you need it to gain a better understanding (css, html, and js).

css Code:
Original - css Code /* DROP-DOWN NAVIGATION MENU */ #sddm { margin: 0; padding: 0; z-index: 30; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li a:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; text-decoration:none; } #sddm li:hover div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; } #sddm li div:hover a{ background: #495B20; color: #BAD36B; } #sddm li div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; border:none; font: 11px arial; } #sddm li div a:hover { text-shadow:#000; text-decoration:underline; border:none; }

  

 /* DROP-DOWN NAVIGATION MENU */


  


 #sddm {


     margin: 0;


     padding: 0;


     z-index: 30;


 }


  


     #sddm li {


         margin: 0;


         padding: 0;


         list-style: none;


         float: left;


     }


     


         #sddm li a {


             display: inline-block;    


             text-decoration: none;


             color:#495B20;


             background-color:#BAD36B;


             border-left: 2px solid #fff;


             border-top: 2px solid #fff;


             border-right: 2px solid #000;


             border-bottom: 2px solid #000;


         }


         


             #sddm li a:hover {


                 background-color:#495B20;


                 color:#BAD36B;


                 border-left: 2px solid #000;


                 border-top: 2px solid #000;


                 border-right: 2px solid #fff;


                 border-bottom: 2px solid #fff;


                 text-decoration:none;


             }


         


         #sddm li:hover div {


             position: absolute;


             visibility: hidden;


             margin: 0;


             padding: 0;


             background: #BAD36B;


             border-left: 2px solid #fff;


             border-top: 2px solid #fff;


             border-right: 2px solid #000;


             border-bottom: 2px solid #000;


         }


         


         #sddm li div {


             position: absolute;


             visibility: hidden;


             margin: 0;


             padding: 0;


             background: #BAD36B;


             border-left: 2px solid #fff;


             border-top: 2px solid #fff;


             border-right: 2px solid #000;


             border-bottom: 2px solid #000;


         }


         


         #sddm li div:hover {


             background-color:#495B20;


             color:#BAD36B;


             border-left: 2px solid #000;


             border-top: 2px solid #000;


             border-right: 2px solid #fff;


             border-bottom: 2px solid #fff;


         }


             #sddm li div:hover a{


                 background: #495B20;


                 color: #BAD36B;


             }


         


             #sddm li div a


             {   position: relative;


                 display: block;


                 margin: 0;


                 padding: 5px 10px;


                 width: auto;


                 white-space: nowrap;


                 text-align: left;


                 text-decoration: none;


                 border:none;


                 font: 11px arial;


             }


         


             #sddm li div a:hover {


                 text-shadow:#000;


                 text-decoration:underline;    


                 border:none;


             } 

html Code:
Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'> Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'> Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } echo " </div> </li> <li> <a href='".get_users_link()."'> Members</a> </li> <li> <a href='".get_news_link()."'> News</a> </li> <li> <a href='".get_submit_link()."'> Submit</a> </li> <li> <a href='".get_links_link()."'> Links</a> </li> <li> <a href='".get_rules_link()."'> Rules</a> </li> <li> <a href='".get_faq_link()."'> FAQ</a> </li> <li> <a href='".get_contact_link()."'> Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div>

  
<div id='navbar'>
        <ul id="sddm">
        <?php
        echo "
            <li>
                <a href='".get_home_link()."'>
                    Home</a>
            </li>
            <li>
                <a href='".get_category_link("name=all&page=1")."'"; 
                ?>
                    onmouseover='mopen("m1")' <?php echo "
                    onmouseout='mclosetime()'>
                    Games</a>
                <div id='m1' 
                    onmouseover='mcancelclosetime()'
                    onmouseout='mclosetime()'>
                    ";
                    $categories = get_categories("htmlize=true&order=order&sort=ASC");
                    foreach ($categories as $category) {
                        $link=get_category_link("name="._sp($category['name'])."&page=1");
                    
                        echo "<a href='".$link."'>".$category['name'];
                    
                        $category['gamenum'] = count(get_games("thecat="._sp($category['name'])));
                        echo " (".$category['gamenum'].")";
                    
                    
                        echo "</a>";
                    }
                    echo "
                </div>
            </li>
            <li>
                <a href='".get_users_link()."'>
                    Members</a>
            </li>
            <li>
                <a href='".get_news_link()."'>
                    News</a>
            </li>
            <li>
                <a href='".get_submit_link()."'>
                    Submit</a>
            </li>
            <li>
                <a href='".get_links_link()."'>
                    Links</a>
            </li>
            <li>
                <a href='".get_rules_link()."'>
                    Rules</a>
            </li>
            <li>
                <a href='".get_faq_link()."'>
                    FAQ</a>
            </li>
            <li>
                <a href='".get_contact_link()."'>
                    Contact</a>
            </li>";
        ?>
        </ul>
        <div style="clear:both"></div>
    </div>

I set up a class (named "emphasized") to be bold, italic and color #087112. The color is being applied but for some reason the font is not appearing bold or italicized. (See "Introduction to EFT" text.)

The bullets (set up in css as id selector "li") are not being styled either (same thing, the color is applied but not the list styling).

Since I'm a new user I'm not allowed to put links in my post but you can see the pages he

HTML page can be found at tinyurl dot com /da97nb
CSS can be found at tinyurl dot com /de9tqe

Help! And thank you!

Hi,

Is it possible to style text on the same line like so....


T est

Regards

Chad

Hi, I've recently built my first site using the Magento eccomerce paltform.

I'm having a problem with the text box for the item descriptions on the product pages. The problem is that on page load the item description drops about 200px and overlaps outside of the text box area.

This only happens in IE.

I'm sure this is a CSS stylign issue but i'm not entirely sure what needs to be done or which attribute wil fix it.

Any help would be appreciated. I'm not allowed to post urls on this forum as a new user but the website is a UK site called lowpricememory. The url is lowpricememory with dot co dot uk. You will see the problem on any product page.

Thanks, Tim

I'm missing something here. I want to change the color of the default value for this text field, without changing the overall color of the input field. For example, the default value of 170 will be gray, but when a user overwrites the data with their own numerical value, it will be black. I know how to change the color of the input field when a user types in data, but is there a way to change the color of the value= ?

<input type="text" name="trans1_1" size="6" value="170"/>

Any ideas? Seems like a simple task, but can't figure it out. Thanks in advance for the time.

http://www.lockheed-martin.co.uk/css/full_layout_test.html

ok if you go there, you will see a text resize functionality, if you decrease the browser size, this text will fall out of the border.. any way to fix that?

also I was trying to align the menu to middle but margin:auto isnt working like it did for the body?

finally I want to style forms without using floats or br

but they are not playing ball.. (well the code I have, I think is poor but it works for them but not for submit button which I would like to be on its own)

Code:

form {
        width:30%;
    }
    
    fieldset, input {
        color:green;
        border:1px solid green;
    }
    legend {
        margin-left:0.5em;
    }
    label{
        white-space:pre;
        margin:0 1em 0em 1em;
    }
    input {
        width:50%;
        margin-bottom:1em;
    }
    input[type="submit"] {
        padding:2px;
        margin-left:1em;
        width:auto;
        
    }

form:

Code:

<form action="" method="post">
            <fieldset>
                <legend>Example of a form</legend>
                <label>First Name</label>
                <input type="text" name="firstName" size="10"/>
                
                <label>Last Name</label>
                <input type="text" name="lastName" size="10"/>
                
                <label>Some options</label>
                <input type="checkbox" name=""/> Some
                <input type="checkbox" name=""/> other
                
                
                <input type="submit" name="submit" value="submit"/>
        </form>

PS> if you go to the link and view source, you will see that I have used very few ids and instead used CSS selectors.. any comment on code would also be appreciated.. The reason for this is mainly for me to learn these selectors & work with them.. and this is the reason I have not used float property.. which I am amazed that you could replicate using overflow:hidden and top & left to align elements..

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

I'm using dreamweaver to work on a basic example that I seem to have working fine. However I've uploaded it onto the server and it's coming out as if there was no styleing at all applied inclucing colour. I've showed an example of both the site and code if anyone can help. I should have a load of colums and rows, like tables, wit text in them but all I seem to see is just words laid out with no styling attacted to them......God I've forgotten how awkward code can be at times. Below is the link.

http://ballyviewbuilders.com/Centering.html

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

div.wrapper 
{
    width: 750px;
    margin: 0 auto;
    text-align: left;
}

div.1a 
{
 	float:left;
 	width:190px;
 	background: FFFF00;
 	color:000000;
	padding: 10px;
}
div.1b 
{
 	float:left;
 	width:190px;
 	background: DDDDDD;
	color:000000;
	padding: 10px;
}

div.1c 
{
 	clear:both;
 	background: EEEE00;
	width:400px;
	padding: 10px;
}

div.1d 
{
 	float:left;
 	width:80px;
	height:40px;
 	background: DDDDDD;
	color:000000;
	padding: 10px;
}

div.1e 
{
 	float:left;
 	width:10px;
 	background: DDDDDD;
	color:000000;
	padding: 10px;
}

</style>
</head>

<body>
<div class= "wrapper">
<div class ="1c">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin  6 we have a </div>

<div class ="1a">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin  6 we have a reputation for top quality workmanship and keen prices on  all jobs quoted, we hope you enjoy your visit to our website.</div>

<div class ="1b">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin  6 we have a reputation for top quality workmanship and keen prices on  all jobs quoted, we hope you enjoy your visit to our website.</div>

<div class ="1b">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin  6 we have a reputation for top quality workmanship and keen prices on  all jobs quoted, we hope you enjoy your visit to our website.</div>
<div class ="1d">gfgdfg</div>

<div class ="1d">gfgdfg</div>

<div class ="1e">g</div>

<div class ="1c">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin  6 we have a reputation for top quality workmanship and keen prices on  all jobs quoted, we hope you enjoy your visit to our website.</div>



</div>
</body>
</html>

Hello all,

I am trying to style links on my page and cannot figure out how to do so. I am using a JQuery Framework and perhaps somehow that is messing me up. attached are the two Jquery javascript files.

I want to make the links blue, please tell me how to do that. Thank you.

Code:

 <!DOCTYPE html> <html> 	<head> 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 		<title>jQuery UI Example Page</title>         <link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	 		 		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> 		  		<script type="text/javascript"> 			$(function(){  				 	 				// Tabs 				$('#tabs').tabs(); 	  				 				 			}); 		</script> 		<style type="text/css"> 			/*demo page css*/ 			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} 			.demoHeaders { margin-top: 2em; } 			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} 			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} 			ul#icons {margin: 0; padding: 0;} 			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;} 			ul#icons span.ui-icon {float: left; margin: 0 4px;} 			.SearchOptions a {color:#990066} 		</style>	 	</head> 	<body> 	 		 	 		<!-- Tabs --> 		<h2 class="demoHeaders">Tabs</h2> 		<div id="tabs">   			<ul> 				<li><a href="#tabs-1">Buy Books</a></li> 				<li><a href="#tabs-2">Sell Books</a></li> 			</ul> 			<div id="tabs-1">             <form>             <table>             <tr>              <td>Item 1 <input type="text" name="Item1" /></td>               <td>Item 2 <input type="text" name="Item2" /></td>              <td>Item 3 <input type="text" name="Item3" /></td>              <td>Item 4 <input type="text" name="Item4" /></td>              </tr>             <tr>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>              </tr>              <tr>               <td>Item 5 <input type="text" name="Item5" /></td>                <td>Item 6 <input type="text" name="Item6" /></td>               <td>Item 7 <input type="text" name="Item7" /></td>               <td>Item 8 <input type="text" name="Item8" /></td>              </tr>              <tr>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>              </tr>              </table>              </form>               </div> 			<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> 		</div> 	 		<a href="" class="SearchOptions"> dadadada</a>  	</body> </html>

I'm trying to figure out how to do something like this:
Code:

<h6>Lorem Ipsum Dolor
<span>jan 10 2006</span></h6>

And make the heading line up to the left side and the span on the right. It's close. It's lining up on the right but on the next line down rather than the same line.

Take a look.

Any bright ideas on why this is happening or how to fix it?

Thanks.

Hi can any one suggest a solution to my problem.
I have all my a tags as -

a{border-bottom: thin #0066FF solid;text-decoration:none;padding-bottom: 2px}
and my img tag as
img {border-bottom: none}

However I have 4 images in 1 div that just wont accept it. So it must be precedence right. But theres no selector after it that would cause the issue so I've ruled that out.

So I tried a more deeper selector.

#rightside img/#rightside a img/#rightside img a/
They didn't work.

So in frustration I added a class to the 4 images a tag and then tried

.info/.info img/.info a img/.info img a/

Still no joy.

I then moved the class to the img tag in desperation and tried -
.info/img .info
Still no joy.
I tried all these with the below css -

{border-bottom: none}
{border-bottom: thin #FFF solid}
{border-bottom: 0px}
{border-bottom: transparent}
{border: none}
{border: thin #FFF solid}
{border: 0px}
{border: transparent}

I know it's not precedence because there is 1 image after these in a different p tag that takes effect.ie: no border.

It's not a selector on the same tag as there is no border on the tag.

I then drop kicked my computer across the room and decided to ask for help. Any one got any ideas?

The code looks similar to this -

<div id="new-image">
<h4><a href="my-site.htm">Link</a></h4>
<a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a>
<h4><a href="my-site.htm">Link</a></h4>
<a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a>
<h4><a href="my-site.htm">Link</a></h4>
<a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a>
<h4><a href="my-site.htm">Link</a></h4>
<a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a>
</div>

the css is -
#new-image {text-align: center;width:180px;margin:-10px 0px 13px 15px}
.info {border-bottom: none}

The a tag css is above this in the css code.

Cheers in advance

Jazajay

Hello! Im Using Joomla to build my website. Im using a module and im changing the css styling. There only one problem im having. The tabs on the module align to the left and because i dnt have enough tabs to fill out the space it leave a blank space on the right.

I just want to know how to edit the CSS to make the taps justify / spread out evenly. The makers of the module say any question on customization will be ignored that why i post this question here to see if i could get some help. Its "Tabs Manager GK3" from Gavick

Heres the CSS. Can any1 just make the changes for me please and post it below Thanks in advance!

Code:

.clearfix-tabs{
clear: both;
}

.gk_tab_item_space{
padding: 10px;
}

div.gk_tab-style3 {
position: relative;
}

div.gk_tab_wrap-style3 {
margin: 0 auto;background: #171717;
border: 4px solid #822864;
}

div.gk_tabmenu-style3 {
overflow:hidden;
}

ul.gk_tab_ul-style3 {
list-style-type: none;
margin: -1px 0 0;
padding: 0;
}

ul.gk_tab_ul-style3 li {
background: none;
padding: 0;
float: left;
cursor: pointer;
margin: 0;
position: relative;
}

ul.gk_tab_ul-style3 li span {
background: url('../../images/horizontal/style3/bg_tab.png') repeat-x 0 0;
display: block;
height: 28px;
line-height: 27px;
padding: 0 10px;
font-size: 10px;
color: #000;
text-transform:uppercase;
border: 1px solid #e1e1e1;
border-left: none;
}

ul.gk_tab_ul-style3 li.active span {
background: url('../../images/horizontal/style3/bg_tab-active.png') repeat-x 0 0;
color: #171717;
border: 1px solid #b32784;
}

div.gk_tab_container0-style3 {
clear: both;
}

div.gk_tab_container1-style3 {
overflow: hidden;
}

div.gk_tab_item-style3 {
float: left;
overflow: hidden;
padding: 10px;
}

div.gk_tab_button_next-style3,
div.gk_tab_button_prev-style3 {
width: 24px;
height: 24px;
background: url('../../images/horizontal/style3/b_next.png') no-repeat 0 0;
cursor: pointer;
position: absolute;
top: 43%;
right: 0;
}

div.gk_tab_button_prev-style3 {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 0 0;
left: 0;
right:inherit;
}

div.gk_tab_button_next-style3:hover {
background: url('../../images/horizontal/style3/b_next.png') no-repeat 100% 0;
}

div.gk_tab_button_prev-style3:hover {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 100% 0;
}

.gk_tab_container0-style3,
.gk_tab_container1-style3,
.gk_tab_container2-style3{
position:relative;

}

Hey Everyone!

I'm having issues with a custom sliding panel showing correctly in IE. It works EXACTLY as I'd like in Firefox, but breaks in Internet Explorer.

I tried different positioning items, and tweaking everything I could think of, but it would appear that I'm stumped.

knockoutsadvertising[dot]com/gaptest/

In the right hand sidebar, clicking 'Learn More' will open the panel. There's a link within the panel to close it again. Any help on how to get this thing positioned correctly in IE would be awesome.

Brad

So my webpage is using a sliding doors type navigation bar while also implementing a php includes in the content area. One of the problems here is on showing the "selected" or "you are currently here" state of a navigation button.

Normally, it seems you would simply specify the class of the li element that corresponds to the page the user is on as "selected". However in this case, the navigation code is in the index.php and therefore constant and unchanging.

So how would I implement this feature on my website? I've tried using javascript to manually change the styles, but either thats not possible or I have no idea what I'm doing.

I realize my post may not be very clear as I am not sure how else to explain it. I will gladly clarify.

Thanks!