I have a horizontal list of color swatches, and each list item has the following markup:
<li class="ws-filter">
<a class="ws-swatch-link" title="Black" href="#">
<div title="Black" class="ws-filter-swatch" style="background-color: #000000;"></div>
</a>
</li>
However, a selected color swatch has the following markup (no anchor tag):
<li class="ws-filter ws-selected">
<div title="Silver" class="ws-filter-swatch" style="background-color: #c0c0c0;"></div>
</li>
Here's the CSS:
.ws-filter-list .ws-filter {
display: inline-block;
}
.ws-filter-swatch {
width: 20px;
height: 20px;
border: 1px solid #dcdcdc;
margin: 2px;
}
And here's the JSFiddle: http://jsfiddle.net/nHk27/2/
This works just fine in most browsers, and looks like the following:
However, in IE8, the selected swatch pops out of line, like this:
This is a project I'm working on, and I can't change the markup. I've tried experimenting with changing the display of the div, anchor and list item in different combinations. I'm pretty sure I could get it to work using float, but is there any way to fix this without using float?
Try
vertical-align: middle;
I have a strong hunch IE8's default puts the content up on top.
Since you're not posting any relevant CSS, I can only suggest you to use IE hacks technique to target IE8 in your case, try something like this:
.ws-filter div[title="Silver"] {
margin-top: 20px\0/ /* or margin-bottom: -20px. The value here can changed based on your context */
}
Related
I'm playing around with a simple website (I'm a beginner with HTML and CSS), where I made a simple menu with some submenus. The content of the page, mainly images and videos will be displayed in a scrollbox.
Now I thought that instead of creating different subpages, it'd be better to be able to jump down to the relevant content. I've tried out different solutions, but something's not working out - or at least, jsfiddle doesn't show it.
<div id="navigation">
<ul>
<li>
main menu
<ul>
<li>section 1</li>
<li>section 2</li>
<li>section 3</li>
</ul>
</li>
</ul>
</div>
that's my code for one part of the menu, here's the scrollbox with images:
<div class="scroll" style="float:left;border: 1px solid black; width: 40em;
height: 30em; line-height: 3em; overflow-y: scroll; overflow-x:hidden;
text-align: center; margin:5%; margin-bottom: 5%; background-color: #ffffff;
color: #ffffff;">
<img src="http://websiteurl.com/image.jpg" style="float: left; width: 95%;
padding: 3%; padding-right: 3%; display: block" alt="image1">
<a name="section1"><img src="http://websiteurl.com/image2.jpg"
style="float: left; width: 95%; padding: 3%; padding-right: 3%; alt="image2"></a></div>
So as you can see, I would like clicking on the menu link "section 1" cause to jump down the scrollbox to the desired image location without changing the page itself.
How would that be possible? or: where's the error in the anchoring? Thank you all for answers!
It's difficult reading the code with the inline css. I'd first suggest moving the css to a stylesheet, that would surely help readability and debugging.
Have you tested without the images or without the scroll box?
An anchor tag is normally just
Click Here
or if using images instead of links
<img scr="imageLocation"/>
and then the anchor part is
<a name="myAnchorName"></a>
I'm using a bit of javascript to create a dropdown that appears when an image is clicked. Currently the initial image is centered, but the drop down is appearing at the left of the frame... and I'm stumped. Help would be greatly appreciated. My code is below:
<div align="center" class="dropdown">
<img alt="Select Your District Here" onclick="showMenu()" src="images/buttons/select_district.png" style="width: 200px; height: 36px;" />
<ul aria-labelledby="dLabel" class="dropdown-menu" id="district-dd2" onmouseout="hideMenu()" role="menu" style="display:none">
<li>
Arbuckle</li>
<li>
Country Estates</li>
<li>
Strawberry</li>
<li>
Walnut Ranch</li>
</ul>
<script type="text/javascript">
function showMenu(){
document.getElementById("district-dd2").style.display="block";
}
function hideMenu(){
document.getElementById("district-dd2").style.display="none";
}
</script></div>
Site can be seen here: http://www.waterutilitymanagementservices.com/deloro/water-districts.html
EDIT: CSS for dropdown-menu added. FYI, this site is using joomla beez template with bootstrap, with css heavily modified. the code below comes from bootstrap.css
.dropdown-menu > li > a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 20px;
padding: 3px 20px;
white-space: nowrap;
}
EDIT 2: More CSS - After scouring all my css files, it looks like all the references to dropdowns are in bootstrap.css. Rather than past all of them here (which would be long), i posted the CSS as a txt file here: http://www.waterutilitymanagementservices.com/boostrap.txt
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
I have this image link:
<p class="alignright">
<a target="_blank" href="...">
<img width="230" height="158" align="right" style="margin-right: 30px; margin-top: 20px;" src="some_source" >
</a>
text should go here
</p>
The alignright class looks like that:
.alignright {
float: right;
margin: 4px 0 1px 10px;
}
Now I tried several things to place text below the above image link (I tried using a < br > and image captions for example), but everything failed. The text is either too far on the left, or its not even below the image link.
Any ideas how to get the text below the image link?
Thanks!
You mean that you want the text to be aligned to the left edge of the image link?
This means that you have to put both elements into one container and assign the float:left property to this one:
I guess that this is the "" I can see in your sample.
Did you make sure, that the width of the p-Element is the same as of the image link?
Otherwise the text would be aligned to the p-borders wherever they are on your page.
Shrink the size of the p-Element or put everything into an extra container:
<div style="float:right; width:#IMAGE_LINK_WIDTH#; text-align:left;">
IMAGE_LINK
<!-- A <br /> might be placed here -->
Text
</div>
after <p class="alignright"></p> tag put
<br style="clear: both;" />
some text here
Text will appear under the image.
Live Sample
Just add a span or a div with clear:both property and then align your text as you need.
EDIT:
If the text below the image is a link then just wrap the link inside a p tag like this
<p>Your Text</p>
By doing this your link will appear in the next line as p is a block element.
Block elements force line breaks before and after the position they are placed at.
See Demo
This is html file
<img src=""><span id="title" >your text</span>
This is css file
span#title {
text-align: center;
font-weight: bold;
}
span {
background: black;
bottom: 459px;
padding: 5px;
color: white;
opacity: 0.7;
position: absolute;
left: 8px;
width: 244px;
}
Try in this way
This HTML-Code...
...works with this CCS-Code...
a.testclass
{
background: transparent url(sprite.png) no-repeat -125px -671px;
display: block;
width: 378px;
height: 150px;
}
...in Firefox 12 but not in Internet Explorer 8.
The code is inspired by this question regarding anchors, sprites and CSS. I've found a similar questions, but since this code is placed within a rather complex Drupal installation, I still hope that there's an easier way to fix this issue than going through the code to find some "absolutely positioned outer div and some menu styles", which had been responsible for the issue in 2.
Thanks for your help.
Edit-1:
This is the Firebug HTML-Log:
<div id="banner-area">
<div id="banner-left">
<div class="region region-banner-left">
<div>
<a href="LINK">
<img width="378" height="150" alt="ALTTEXT" src="IMAGE.GIF">
</a>
</div>
</div>
</div>
<div id="banner-right">
<div class="region region-banner-right">
<p>
<a class="testclass" href="LINK"></a>
</p>
</div>
</div>
</div>
The referenced CSS-Code is:
#banner-area {
width:756px;
margin:0;
padding:0;
overflow:hidden;
}
#banner-left {
width:378px;
float:left;
margin:0;
padding:0;
}
#banner-right {
width:378px;
float:right;
margin:0;
padding:0;
}
The first picture (IMAGE.GIF) is shown in FF and IE8. The second hoever, the one i'd like to replace with a sprite, is only shown in FF but not in IE8.
I've turned transparency on and off as Florian suggested, but to no effect. I've reduced the image size by 10px in width and height, but that didn't help either.
After two days of wasted time I've found out that IE8 doesn't import more than 31 css-files: http://drupal.org/node/228818?page=1
After enabling the "optimize css-files"-feature again in the Drupal administration panel of my installation, which I had turned off so it doesn't interfere with my development, everything worked fine.
This question is related:
IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)
so change your code to:
a.testclass
{
background: url(sprite.png) no-repeat -125px -671px;
display: block;
width: 378px;
height: 150px;
}
if you really need to erase that background-color (and therefore setting it to transparent) try other settings like
a.testclass
{
background-color: transparent;
}
However, IE8 does not like that so be aware to have some fix included for IE8.