I'm having an issue.
I'm trying to display some images alongside some text in a menu, however each image has a larger height than the text therefore the text is centered to the image.
Essentially, this is the site: http://www.sasstraliss.org/scme2202
And, it views perfectly fine in firefox.
In chrome, it displays vertically. In IE, the images are squashed.
Where has my CSS gone wrong?
I'm using this approach for the images...
#menu img {
min-height: 1em;
display: table-cell;
vertical-align: middle;
padding: 0px 0px 0px 10px;
}
I haven't looked at your code but assuming that you have something like this in your HTML:
<div id="menu">
<img src="someimage.gif" />Some text
<img src="otherimage.gif" />Other text
</div>
The following CSS should do the trick:
div#menu {
overflow: auto;
}
div#menu a {
float: left;
margin-left: 10px;
}
div#menu a img {
height: 60px;
width: 60px;
margin-right: 10px;
vertical-align: middle;
}
Note: it is good practice to always set the dimensions of your images explicitly, this speeds up page rendering and stops things jumping around as the page is reflowed during loading.
I just tried removing min-height and the table cell display, and it works fine now.
Related
I feel like this should be (and probably is) answered somewhere, but either that's not the case, I'm not searching the right way, or it's some closely guarded national secret, because I cannot find an answer that works. Specifically, I cannot find an answer that accommodates the image on the left side of my div.
What I'm trying to effect is for the text to be centered horizontally with regards to the entire screen and vertically within the 'header' div. I don't want to use my logo as a background, because I'm using it as a home anchor. I have tried to using 'display: table-cell' and 'vertical-align: middle' to disastrous result. Please, any advice/help/link is appreciated.
CSS:
#header{
width: 85%;
min-width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background-color: #fff;
border-bottom-width: 10px;
border-bottom-style: double;
border-bottom-color: #000;
}
#title{
width: 85%;
margin-left: auto;
margin-right: auto;
position: absolute;
display: table-cell;
vertical-align: middle;
}
#logo{
float: left;
padding-right: 1em;
width: 150px;
}
HTML:
<div id="header">
<img id="logo" src="../images/logo.jpg" alt="Widget News" />
<span id="title"><h1>Site Title</h1></span>
</div>
Also, I'm completely new to using CSS (and pretty useless with xhtml/html5). I'm working on my current project as a means to familiarize myself with CSS/PHP/HTML/JScript, and so far, the CSS/HTML is the only part that I'm having problems with. Any pointers to a good beginner's, but not remedial/'for dummies', guide would also be appreciated.
I'd recommend making your logo absolutely positioned. That will take it out of the flow of the html elements (like a background image does) while keeping it still clickable.
#logo {
position: absolute;
top: 5px;
left: 10px;
width: 150px;
}
That will make it easier to center your title. Here's the full example with a few adjustments to your code:
http://jsfiddle.net/gqvUv/
Your "text-align: center;" keeps everything centered horizontally, and adjusting the line-height of your h1 will work to center it vertically, as long as the title is just one line.
It's easy to get confused by relative and absolute positioning, but this tutorial makes it clear: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Finally, this is my go-to article on centering things with CSS: http://designshack.net/articles/css/how-to-center-anything-with-css/
I have an issue regarding a div with overflow: hidden. It is positioned relative and it's child div is positioned absolute. On hover, the parent div changes from overflow:hidden to overflow:visible. This enables the child div to display properly.
The issue: although everything else works just great, when the mouse is no longer over the parent div (thus overflow is now hidden again), bits of the child div are still shown in their place. They are not actually displayed, because if I select some text or objects near them the dissapear completely. It's as if the page needs a "refresh" of some kind.
Has anyone else come accross this? I'm kind of stuck on this...
UPDATE: I made a jsfiddle with the issue and realised it's only occuring on webkit based browsers (Chrome and Safari). I still have no idea why, though...
<div class="list-name">
<ul>
<li class="truncated">
<a href="">
Hover me to see all the magic thext I'm hidding
</a>
</li>
</ul>
</div>
It would seem that an extra overflow:hidden added to the hyperlink solves the issue. Check it out in this fiddle.
That looks like a bug in rendering, not why it works like that. Developer tools show it like mouse is still hovered above the element. Possibly there some element became to wide/high and mouse out event can't happen. But if you remove position:relative;, position:absolute; and replace top/left with margin-top/margin-left - everything works nice to me:
http://jsfiddle.net/Nt5bN/13/
CSS:
.list-name ul {
margin: 50px;
padding: 0;
list-style: none;
}
.list-name li {
display: block;
float: left;
width: 60px;
height: 29px;
overflow: hidden;
background: #eee;
}
.list-name a {
width: 300px;
display: block;
float: left;
}
.list-name li.truncated:hover {
overflow: visible;
}
.list-name li.truncated:hover a {
margin-top: -3px;
margin-left: -8px;
background: #fff;
z-index: 9999;
padding: 2px 0 2px 7px;
border-radius: 3px;
border: 1px solid #ddd;
}
This is may html markup
<header>
<span> <!-- background image here --> </span>
<hgroup>
<h1 class="testing">CSS3 and Compass Documentation</h1>
<h2>here I am going to document my compass and CSS3 learning</h2>
</hgroup>
</header>
And this would be mart of my css:
header span {
background: url(banner.gif) center 0 no-repeat;
background-size: 100% auto;
display: block;
height: 170px; /* maybe this is where it needs changing*/
width: 100%;
}
The problem starts once you start to making the browser window smaller (iphone size for example). The image shrinks (as I want it to) but still the height remains 170px leaving a bigger gap between the image and the hgroup content
I have tried to use height: 100% but that does not work at all (in this case at least).
In case you need a demo http://jsfiddle.net/Jcp6H/
in this case, you would like to have your <span> element resize with the height of your (background)image.
I would advise to use the <img> tag instead of a background-image.
<header>
<img src="http://movethewebforward.org/css/img/beanie-webasaurs.gif" alt="Webasaurs!" />
<hgroup>
<h1 class="testing">CSS3 and Compass Documentation</h1>
<h2>here I am going to document my compass and CSS3 learning</h2>
</hgroup>
</header>
In CSS style your image that way:
header {
max-width: 950px;
}
header img{
display: block;
width: 100%;
}
header h1 {
color: #324a69;
font-size: 3em;
text-align: center;
text-shadow: 1px 1px 0 white;
position: relative;
}
header h2 {
clear: both;
color: #705635;
text-shadow: 1px 1px 0 white;
font-size: 2em;
text-align: center;
}
It is quite hard to size the height of an element based on its background-image...
First off use an image inside of your span as it makes it easier to work with.
<span><img src="banner.jpg" /></span>
I tried this as an example you can replace with whatever you need
header span img {
background: #960;
display: block;
max-height: 170px;
max-width:950px;
width: 100%;
height:100%;
}
All you need to do is set a max-height and max-width, this way they will shrink with the browser without adding extra spaces. If needed you can also set a min-height etc to stop it going too small.
Try it and see if that works for you.
I have a series of buttons on my website that have I want to be at 100% width with a fixed column on the right and a flexible one on the left.
My first thought on how to do this was to use a liquid page layout and just use it on a div instead of the whole page. My results are below:
This image is what happens when the page is displayed so that the link can fit within the box.
If the page is scaled down however, I want the right column (set at 70px) to fill the entire height and align the text horizontally.
The code I am currently using to produce those results is this:
<li class="manage-files-list">
<div class="container">
<a class="right" target="_blank" href="">view</a>
<div class="left">
</div>
</div>
</li>
And
li.manage-files-list {
width: 100%;
display: table;
background-color:rgba(0,0,0,.05);
}
.container{
border-bottom:1px solid white;
color:#666;
text-shadow: 0 1px 0 #fff;
}
.left {
margin-right:70px;
word-break: break-all;
height:100%;
border-right:1px solid #fff;
}
.right {
width: 70px;
float: right;
text-align: center;
background-color:#333;
display:inline-table !important;
vertical-align: middle;
height:100%;
}
The only other requirement I can think of is that it needs to be wrapped in an <li> tag, but I don't see why that would be a problem.
Since it looks like you are okay using display: table*; values, here's a jsFiddle showing a solution using that.
It sets both .left and .right to display table cell, stops floating .right and instead moves it to be the second element. The issue was that your floating was causing the browser to ignore the height and the display property and just treat it as a floated block.
Also, making sure you are aware, these solutions using display: table*; are compatible IE8+
Although I don't really recommend using .left and .right as class names, the solution really only requires you to set overflow: hidden and word-wrap: break-word for your .left <div>.
.right { float: right; }
.left {
word-wrap: break-word;
overflow: hidden; }
Preview: http://jsfiddle.net/Wexcode/HzpJu/
I have a scrollable div on a page that ends up rendering past the bottom of div and sometimes leaves stick characters behind that don't scroll. This happens in IE7 and IE8 in compatibility mode.
Here is the HTML code from the DOM:
<DIV id=ctl00_MainContent_ViewPort class=AgreementViewPort><IMG class=PortSeal src="/images/Seal.png">
<DIV class=DocumentTitle>Document Title</DIV>
<OL>
<LI>Condition #1</LI>
<LI>Condition #2<SUP>1</SUP></LI>
<LI>Condition #3</LI>
<DL>
<DT><SUP>1</SUP> some foot-noted definition.</DT></DL></DIV>
Here's the applied CSS style:
color: #000;
font-family: arial, tahoma, sans-serif
font-size: 12pt;
height: 300px;
margin: 5px;
overflow: scroll;
padding : 5px;
width: 600px;
This renders fine under IE8, Firefox, and Chrome.
Any suggestions?
Just by looking I'd suggest putting the image in its own DIV. This way you can control any overflows.
Also add the following to your CSS:
clip:rect(0px,600px,300px,0px);
We've solved the mystery.
If you want to poke at the issue directly, here's where it can be seen live. Note: After we push the fix, this link won't repro.
On the LI element in the page level CSS, I removed the following style attributes
li
{
margin-bottom: 10px;
position: relative;
left: 10px;
width: 500px;
}
And replaced them with:
li
{
margin: 0px 0px 10px 25px;
}
On the OL element in the page level CSS, the width attribute was moved.
ol
{
padding-left: 10px;
width: 500px;
}
And I feel like something of an idiot. The moral of the story, and this has been discussed elsewhere is that IE7 scrollable divs and the CSS position attribute do not play well together.