this is probably extremely simple and I'm probably just looking right over the solution, but here's the problem.
I am trying to add a footer, but for some reason the text of the footer appears around 370px below the main content and I have no idea why. I have checked the height of all previous tags and the padding/margin for them all as well, and there is nothing I see that should be causing an issue.
The html code:
<!--Footer-->
<div id="foot_cont">
<div id="foot_width">
<div id="footer">
<p>© Copyright 2014 Legal Consulting, Inc. All Rights Reserved.</p>
</div>
</div>
</div>
CSS Code:
#foot_cont {width:100%;
clear:both;
height:100px;
background-image:-moz-linear-gradient(#FFB062,#FF5900);
background-image:-webkit-linear-gradient(#FFB062,#FF5900);
background-image:linear-gradient(#FFB062,#FF5900);}
#foot_width {width:1300px; margin:0 auto;}
#footer {text-align:center; color:#FFFFFF; text-shadow:2px 2px 0px #000000; font-size:36px;
clear:both;}
Here is a link to the website so you can see the issue for yourself.
http://jqwebexamples.com/iAM_Talent/Version3/index.html
Your CSS has a rule for #right_content that sets the height to 1600px. Remove it.
Related
So I was designing some stuff for a Tumblr theme, and I came across a very annoying problem. I was coding the Reblog and Like buttons, and the Reblog button works fine, but for some reason the Like button gives itself like an extra 5px of padding on the bottom. It is not really a serious problem, but it's really annoying to me because I cannot find a way to get rid of it. I tried changing height, max height, positioning and all, and nothing got rid of the extra space at the bottom. It may be some stupid mistake on my part, or maybe It's just supposed to be like that, and I'm not realizing it because it's too late, but any help would be nice.
Here is my test blog too in which I have the theme set up. If you look at the source, or mouseover the Like button you can see.
http://mchickenposts.tumblr.com/
Edit: I could just extend the length of thee li, and add the cursor property so the bottom 5px isn't left out. But I wanted to know How i can get rid of it totally.
Here is my Html Code for the Posts, and the Css too.
.post_reblog_like{
list-style-type:none;
padding:0px;
margin:0px;
display:inline-block;
float:right;
}
.post_reblog_like li{
display:inline-block;
opacity:.7;
}
.post_reblog_like li:hover{
opacity:1;
}
{block:Text}
<div class="post_wrapper">
<div class="post_text">
<div class="post_text_body">
{block:Title}
<a class="PostTitle" href="{Permalink}">{Title}</a>
{/block:Title}
{block:NoteCount}
<a class="post_notes" href="{Permalink}">{NoteCountWithLabel}</a>
{/block:NoteCount}
<div class="PostBody">{Body}</div>
</div>
<div class="post_date">
{block:Date}
<a title="{DayOfWeek}, {Month} {DayOfMonth}, {Year} # {12Hour}:{Minutes} {AmPm}" class="post_date_text" href="{Permalink}">{TimeAgo}</a>
{/block:Date}
<ul onmouseover="changeClass();" class="post_reblog_like">
<li title="Reblog">{ReblogButton color="white" size="20"}</li>
<li title="Like">{LikeButton color="white" size="20"}</li>
</ul>
</div>
</div>
</div>
{/block:Text}
I believe the issue is related to line-height (currently there is none defined).
.like_button {
line-height: 0px;
}
Change the .like_button to a display: block and then float: left. Elements with display: inline and inline-block always add some space at the bottom for letters like 'y' or 'g'. Hope it helps someone!
I'm building a site that is almost complete. The problem I am having is with IE7 and displaying images that look very distorted/muddy.
First how it looks in all the other browsers I tested, including IE8.
Removed due to link limit on new accounts
And then the muddy one from IE7
Muddy/Distorted Image
After doing some googling it looks like it has to do with the pixel transparency in PNG images on IE7.
First I tried setting a solid background color in the actual background file. This did not work as the image was still very muddy and distorted.
Next I tried specifying a fixed width and height but still the same result. Not sure what else to try at this point.
Any suggestions I am willing to try.
Here is the code pertaining to the element.
.feature {
padding-top:10px;
border-top:solid 1px #ccc;
width:440px;
margin:0 auto;
padding-bottom:5px;
}
.featureimg {
float:left;
width:190px;
}
.featureimg img {
max-height:90px;
max-width:190px;
vertical-align:middle;
}
.featuretext {
float:right;
text-align:left;
width:250px;
}
<div class="feature">
<div class="featureimg">
<img src="images/certipur.png" alt="" />
</div>
<div class="featuretext">
<div class="featurehead red">
Sealed with comfort and confidence
</div>
<p>
TEXT BLOCK
</p>
</div>
<div class="clear">
</div>
</div>
Here is the link to original file http://imgur.com/z2SoV
In case you still care: http://imgur.com/9H9nFHe
I tried using BrowserStack.com to check for the image using IE7 and it didn't look muddy at all. I guess it your VM display settings but i think it shows up perfectly fine. :)
LIVE CODE
How to I fix the margin of class="content_push" to be uniform across browsers.
Chrome is giving me the view I like
vs.
IE9, opera, ff, looking like:
<div class="content_push">
<section class="cc">
<div class="margin_wrapper">
<header>
<hgroup>
<h1 class="at">rocking grass out styles for everyone.</h1>
<h2 class="ast">The you mice structure for to of almost ability an trying the when designer dissolute that constructing in quickly distinct...</h2>
</hgroup>
</header>
<h3 class="title_header">the good</h3>
<p></p>
<h3 class="title_header">the bad</h3>
<p></p>
<h3 class="title_header">the ugly</h3>
<p></p>
</div>
</section>
</div>
CSS
.mc {
min-height:100%;
width:100%;
background:#fff;
z-index:1;
position:absolute;
border-top:1px #c9cacc solid;
}
.content_push {
margin-top:-35%;
position:absolute;
z-index:10;
background:#FFF;
}
I don't know if it will work (I think it will), but you can try to "reset" the css and them apply your styles. Take a look here: http://meyerweb.com/eric/tools/css/reset/ Apply the style presented in this URL before you use your styles. There are other css resetters, do a google search.
I have the following:
<div style="width:100%;">
<table>
<tr>
<td style="width:30px;">hi</td>
<td style="width:40px;">hi</td>
<td id="lotoftext" style="width:auto;white-space:nowrap;overflow:hidden;">LOTS Of text in here, LOTS</td>
<td style="width:25px;">hi</td>
</tr>
</table>
</div>
What I want to happen is for this table to grow to 100% possible of the outer DIV. Problem is, that the table, with a lot of text inside, ID='lotoftext' is causing the table to grow to a width bigger than the outer div which then breaks the page.
Any ideas? thanks
can you use max-width? You might need to put a div inside that specific TD and give that the max-width
Unless it is tabular data, you should build it using DIVs and CSS. You should be able to achieve what you want with less of a headache this way.
AnApprentice, to achieve this layout using DIV's and CSS (alternate option to using tables) you could approach the situation like this:
CSS:
#body_container{
max-width:700px;
}
.data-container{
background-color:#ccc;
zoom:1;
}
.data-content_a{
width:30px;
float:left;
background-color:#3FF;
}
.data-content_b{
width:40px;
float:left;
background-color:#CF0;
}
.data-content_c{
width:25px;
float:right;
background-color:#9FF;
}
.data-content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 26px 0 71px;
clear:left;
display:inline;
}
.clear{
clear:both;
padding:0;
margin:0;
}
HTML:
<div id="body_container">
<div class="data-container">
<div class="data-content_c">4</div>
<div class="data-content_a">1</div>
<div class="data-content_b">2</div>
<div class="data-content_lotsoftext">lots of text goes here!</div>
<div class="clear"></div>
</div>
</div>
The #body_container (or outter container) can to set to any width or no width. The left margin on the .data-content_lotsoftext is the combined width of .data-content_a and .data-content_b (70px + 1px to be on the safe side) and the right margin on .data-content_lotsoftext is the width of data-content_c (25px + 1px to be on the safe side).
By not assigning a width to .data-content_lotsoftext it will automatically stretch to be full width. display:inline helps it sit better in ie6.
Tested in Firefox, Chrome, IE8, IE7 and IE6 (IE6 and 7 are a little glitchy - if anyone could help refine the CSS to get it to work perfectly in IE6 and 7, please shout out!)
Hope this helps.
Dan
The scenario you are describing is simply not suited for a table. A table should only be used when displaying tabular data. You should be using some other kind of html elements to build your structure and style it with CSS.
I'm trying to replicate this layout with HTML/CSS:
http://reformrevolution.com/
I think I'm getting close to what I need, but I can't get rid of the vertical space between divs, wich should be equal to the horizontal gap, and I believe the divs are not "going down" in the right order.
Here is the code:
<body>
<div class="Main">
<div class="Diagrama1">
</div>
<div class="Diagrama2">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama4">
</div>
<div class="Diagrama1">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama2">
</div>
<div class="Diagrama1">
</div>
<div class="Diagrama2">
</div>
</div>
</body>
And the CSS:
#charset "UTF-8";
/* CSS Document */
.Main {
overflow:auto;
background-color:#CCC;
display:compact,
}
.Diagrama1 {
float:left;
width:180px;
height:260px;
background-color:#00F;
margin:15px;
}
.Diagrama2 {
float:left;
width:180px;
height:150px;
background-color:#F00;
margin:15px;
}
.Diagrama3 {
float:left;
width:180px;
height:320px;
background-color:#F0F;
margin:15px;
}
.Diagrama4 {
float:left;
width:180px;
height:200px;
background-color:#CF0;
margin:15px;
}
Any ideas?
The best to keep that dynamic without exploding your head with numbers and positioning is to use JQuery and the huge amount of plugins created for that kind of stuff:
http://mos.futurenet.com/pdf/computerarts/ART162_tut_dw2.pdf
http://www.chazzuka.com/blog/?p=47
some notes on your css
It's usually bad practice to mix, margins/paddings with widths/heights. Choose one system. Tip 4 from this article
I think you'll have better success using a grid system. They're a bit tough to start with, but they work great
If you don't want a grid, try this article that i find very useful in the css world
Since you have exact heights and widths for all the boxes and you seem to have an idea of the exact place they should go, you might be better off just using absolute positioning. You'll be able to control everything better that way.
Also, you should use ids for those <div>s, not classes, since they're only going to be used once.