Im going mad trying to figure out why the title link (in the left) and the other links in the nav bar (right) are not the same height.
The difference is subtle in Safari, but bigger in IE6.
Im missing something in the css reset of H1?
SAFARI
alt text http://img218.imageshack.us/img218/702/safari.png
IE6
alt text http://img64.imageshack.us/img64/870/ie6.png
The HTML
<div id="navbar">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<h1>title</h1>
</td>
<td align="right">
about
answers
contact
<input type="text" name="search" value="" id="searchbox"> <a class="color4" href="sss">search</a>
</td>
</tr>
</table>
</div>
and the css
#navbar a, h1 a { padding: 3px 5px; vertical-align: middle;}
h1 has been reset
h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}
h1 a { padding: 3px 5px; vertical-align: middle;}
sets a style for a link within an h1, not the h1 itself.
h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}
sets the style for an h1. So the styles for the link still stand, they have not been overwritten.
I think it's because the text input in the right table cell is causing that table cell to "stretch" a little taller than the left table cell (and it will be slightly different on different browsers depending how large they draw the text input box) and thus throwing off the alignment a bit. Try vertical-align:bottom; on the left table cell.
There are some very subtle differences in the way different browsers render styling. This is just another example of it.
To see a REALLY good example of this, try looking at the Acid 2 test in each browser to see some of the differences.
First, if this happens cross-browser, use Firebug in Firefox to tell you where an element's style rules are coming from.
Second, I'd check the line height on the <a> and <h1> as well as the margins on the <a>.
Related
I am writing an emailed newsletter, and need to set an image as the footer, with a few clickable links over it. I have figured it out using both HTML and CSS, but no matter where I searched I could not find a way to do this strictly using HTML. Can anyone help me out?
<!--Footer-->
<tr id="footer">
<td id="footer" style="font-family: 'Titillium Web', sans-serif;;-webkit-text-size-adjust:none;background-image: url" img url"" templates\uuaemail-foot.jpg";padding-left:="" 20px;padding-right:="" 20px;padding-top:="" 10px;padding-bottom:="" 20px;"="">
<table height="101" width="602">
<tbody>
<tr>
<td id="footer" style="font-size: 10px;color:white;" height="95" valign="top" width="600" align="center"><p><br></p><p class="style3"><strong><span style="font-size: 12px;">admissions.rutgers.edu<br></span></strong></p><p class="style3"><span class="style7"><span style="font-size: 8px;"><strong> University Undergraduate Admissions</strong>, Operations Center<br>©2017 , an equal opportunity, affirmative action institution.</span></span></p></td>
</tr>
</tbody>
</table>
</td>
Is what I currently have (with CSS styling)
update: My issue is that the email is widely sent to Ms Outlook 2016, which I have both heard and seen through testing that it does not process CSS styles very well. When I opened this code in Outlook, it showed the CSS styling commands at the top of the message, and did not apply it at all.
CSS is just an organized way for the the stylesheet. Although not recommended, you can use inline styles with just the HTML to achieve almost everything, if you post your code, may be some of us can suggest a definite answer.
HTML is a markup language, it does neither add functonality or style by itself.
There are tags there the browser places default values.
Eg.
<footer> </footer>
The most browser add automaticly:
footer {
display: block;
}
Or the h tag
<h1></h1>
The most browser set the default values like:
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Every other style change has to be done by your self with css. You can also work with inline stlyes like:
<h1 style="color:red;"> A red big text </h1>
A good way to find more about default values and inline styles is: https://www.w3schools.com/
You want to use background image in your email and you want it rendered in outlook. Use this site http://backgrounds.cm/ to generate code for background image that will work in all outlook desktop versions. Then you can add links etc. over the image.
Also, please don't use same id more than once in your code. You can assign an ID to one element only. To cover multiple elements, use class attribute.
Being a professional C++ programmer, I'm a very new to HTML :)
The problem is reproducible under Internet Explorer 11 Windows 10.
Other browsers (Edge, Firefox, Chrome) - works fine.
Code:
<table>
<tr>
<td width=500><h1>Free Monitor Manager</h1>
<br>
It's a simple utility.
<br><br>
</td>
<td width=20></td>
<td><img style="vertical-align:top;" src="main_window.png" /></td>
</tr>
</table>
Problem is shown on this screenshot:
Here is how it should be and how it is in non-IE browsers:
Addition:
Here is how it looks using DIV code below :( Image is above the text:
Here's a more simple version. And yes, please avoid use table tags for general layout:
.prod-img {
margin-left: 20px;
float: right;
}
/* this is optional if you want to set an overall width */
.outer-container {
width: 700px;
}
<div class="outer-container">
<img src="http://placehold.it/350x150" class="prod-img">
<h1>Free Monitor Manager</h1>
<p>It's a simple utility.</p>
</div>
Fiddle here:
http://jsfiddle.net/mark47/5mt66fpL/
The CSS "floats" the image to the right side of the parent container. We're adding a margin-left: 20px to it so there's always some space between it and the text.
Setting an overall width is optional. Could also use max-width
Trust me, you still want to do this sort of thing with DIVs rather than a table.
Like this:
<div style="width:350px;float:left">
<h1>Free Monitor Manager</h1>
<br>
It's a simple utility.
</div>
<div style="position:relative">
<img style="vertical-align:top;" src="http://maps.wunderground.com/data/images/ne_rd.gif" />
</div>
In short, this builds two divs, one with your text that is set to the left, and one with the right that is set relative to it.
You can put whatever you want in either side.
But more importantly, this sort of thing is much more cross-browser friendly.
I have an article page that I am making small CSS changes, such as margin and font size, to. My code has to be able to be supported by Internet Explorer 8 and above. The problem is, I am using some CSS selectors that IE8 does not support. How do I write my CSS code without using the :not selector?
HTML for sample article page
<div class="entry">
<h3 class="social-title>Share This Article </h3>
<div class="social-content>
<table>
<td><img class="" src="twitter.png"><span class="">Twitter</span></td>
<td><img class="" src="facebook.png"><span class="">Twitter</span></td>
</table>
</div>
<!-- The article would start here -->
<p class="category_row"><h1 class="category-title>Lifestyle</h1></p>
<p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;"><img alt="" style="float: left;" src="example.jpg">Article goes starts here...</p>
<p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;">Second paragraph</p>
Third paragraph
</div>
CSS I am using
.entry p:not(.category_row) {
font-size: 14px;
line-height:22px;
}
img (margin: 10px)
So far example, if I wanted to add margin to the image that is in the article section, how would I write the CSS code so that it only affects the image in the article section and not the images in the <div class="social-content">? Without using :not?
Also how would I write CSS code to change the font-size of the article to a font size of 14px and line height of 22px? Without affecting everything else above (not in the article section) ?
Sorry if this is confusing, but I will clarify more if need be!
You will need to be more verbose if you want to support older browsers. The joy of the newer syntaxes is we are able to be more pithy, but if you have IE 8 in your supported list of browsers, you'll need to start with styling more general selectors and then overriding those styles in more precise selectors.
.entry p {
font-size: 14px;
line-height:22px;
}
.entry p.category_row {
font-size: XXpx;
line-height:XXpx;
}
I don't know where your article section begins from your markup. Figure out what is the most logical container for image would be, and then constrain your selector with it. Note article is an HTML5 element, so you would be remiss not to use it:
<article>
<img ... />
</article>
And article images would be styled with this simple selector: article img { ... }
If you want to use article with IE 8, be sure to include this: https://code.google.com/p/html5shiv/
Why don't you wrap the actual content in it's own div?
<p class="category-row">....</p>
<div class="post-content"><!--- maybe use article tag here -->
<p>First paragraph....</p>
<p>Second Paragraph</p>
</div>
Then you can just reference the p's like
.entry .post-content p {
....
}
Also, "category row" doesn't look like it should be a paragraph?
If it is a "row" a div or a span would be more appropriate.
If it contains nothing but the h1 you might as well scrap it and leave the h1 be there without a wrapper.
If you use the article tag (or any of the other new html5 semantic tags) include html5shiv, as Chris said in his answer.
Why won't three elements on the same line get vertically aligned at the same height when using floats?
It appears this is browser specific: the layout is broken in Gecko (Firefox), the right elements is placed on a separate line, whilst the layout is fine in Chromium.
HTML markup:
<div>
<p>
<a class="left" href="left">left</a>
<a class="center" href="center">center</a>
<a class="right" href="right">right</a>
</p>
</div>
CSS styles:
div{width: 100%;margin: 20px 0; }
div p{width: 100%; white-space: nowrap; text-align: center;border: 1px solid blue;}
a.left{float: left;}
a.center{}
a.right{float: right;}
This is the layout result in FireFox:
For convenience: take a look at this fiddler.
I know I have seen this problem before, but I just pull my hair and cannot find a solution for this!
Ok, it appears that there is a very simple workaround that actually "just works" for me. I post it as a question since I did not receive any (usable) answer for such a basic question.
The layout is fine in Gecko (Firefox) when the right element is placed before the center element in the html markup:
<div>
<p>
<a class="left" href="left">left</a>
<a class="right" href="right">right</a>
<a class="center" href="center">center</a>
</p>
</div>
I have no idea why this logic applies, but I am convinced that the Mozilla people will have perfect reasons why this behaviour is just right...
I spent a little while trying to figure out how to achieve the following effect without using a table but couldn't figure it out: http://jsfiddle.net/sKFzA/
CSS :
.header{width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{width:99%;}
.dateCol{vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
HTML :
<table class="header">
<tr>
<td class="titleCol">This is the blog title</td>
<td class="dateCol"> <span> </span><span class="dateText">1/23/2012</span>
</td>
</tr>
</table>
To explain it, I have a blog title and a blog date. The title could be long and wrap. At the end of the last line, wrapped or not, I want the blog date to be aligned to the right.
So I have two questions. Is there any reason not to use a table for this? If so, how would you achieve it without assuming static font sizes?
CSS has properties that allow any element to behave like specific components of a table.
http://cssdeck.com/labs/rjiesryc
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
CSS
header {
display: table;
width: 100%;
}
header h1, header time {
display: table-cell;
}
header time {
/*vertical-align: bottom;*/
}
With the help of cimmanon and the others, I've gathered that:
The only reason's not to use a table here is because layout is not technically a table's intended purpose and also by not using a table you can separate your layout (CSS) from your markup (HTML). However, if I were to use a table, I am not aware of of any negative effects.
There doesn't seem to be a good solution to this exact layout without the concept of table, but my table solution can be achieved without using an HTML table by applying styles to display other elements as the table. So I replaced my table elements with divs. The span with the space before the date allows the smaller sized date to stay aligned to the title's baseline without having to hard-code line height's or font sizes. So if the font sizes change, I don't have to worry about updating any other magic numbers hard-coded around them.
http://jsfiddle.net/K35gT/
HTML
<div class="header">
<div class="titleCol">This is the blog title</div>
<div class="dateCol">
<span> </span><span class="dateText">1/23/2012</span>
</div>
</div>
Styles:
.header{display:table;width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{display:table-cell;width:99%;}
.dateCol{display:table-cell;vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
You do not need tables at all, simply block elements with the right styles.
If it was my website, I would do this:
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
Combined with this CSS:
header {position:relative; width:100%; font:25px Arial,Helvetica,sans-serif;}
header > h1 {margin:0px;}
header > time {display:block; font-size:12px; text-align:right;}
You can decide if you want to use HTML5 elements, or general elements and if you want to hook in class names or not. Here's the jsFiddle for above: http://jsfiddle.net/sKFzA/13/
Something like this? I hope i got you right.
HTML:
<div id="titleRow">This is the blog title</div>
<div id="dateText"><span id="spandate">1/23/2012</span></div>
CSS:
#titleRow{width:80%; height: 25px; font:25px Arial,Helvetica,sans-serif;
float:left;text-align: left;}
#dateText{width:20%; height: 25px; font-size:12px;float:left; text-align: right; position: relative;}
#spandate { position: absolute; bottom: 0; right: 0;}
See here: http://jsfiddle.net/sKFzA/31/