I am trying to vertically align a span-tag inside a DIV. I have a working example on JSFiddle but the EXACT same CSS and HTML will not work on my own site.
#drop_zone {
width: 500px;
outline: 1px solid #E1E1E1;
margin: 0 auto;
height: 200px;
line-height: 200px;
}
#drop_zone span {
display: inline-block;
line-height: 19px;
vertical-align: middle;
}
<div id="drop_zone"><span>Drag file here.<br />Your file will <strong>not</strong> be uploaded!</span></div>
Now, it works on JSFiddle and on Stackoverflow, but why does it not work on my own site? You can check out the results here: http://snorlax.org/stackoverflow.html
If you check the source code, you can see it's the exact same code. What on earh is going on?
Your document is missing the Doctype, so you are triggering Quirks mode. The feature you are trying to use only works correctly in Standards mode. Add a Doctype. Use a validator.
Related
I'm preparing the email html file for mailing. I'm using the table, tr, td tags. The whole content of my html so far is placed within a table, including another small table within one of the cells (see pictures below). I would like the whole table to display always in the center. I would also like the small table to display in the middle of the cell. The width of outer table it fixed.
I tried putting into CSS:
margin-left: auto;
margin-right: auto;
and
margin: 0px auto;
, all of which I have found in here. The preview looks fine with either, the preview after uploading the file into mass mailing system works ok as well. But after sending, the centering does not display at all (the inner table also doesn't display at all in Gmail, only content of it). So I'm looking for the most common, most widely used html property, which would most likely display the table in the middle in every browser/mail client. OR, for the advice regarding the possible wrong usage of class properties.
My whole section:
<style>
table, th, td {
border-collapse: collapse;
font-family: Verdana, sant-serif;
}
th, td {
padding: 15px;
text-align: left;
}
.main {
width:1000px;
border: 5px solid #114889;
margin: 0px auto;
}
.inside {
width: 500px;
border: 1px dotted #0000CC;
background-color: #CCE5FF;
text-align: center;
font-size: 10px;
margin: 0px auto;
}
</style>
I am not a pro with the topic so I apologize for the use of wrong terminology.
Edit:
Display in Outlook. All is well but the left alignment:
Display in Gmail. No tables whatsoever:
Outlook only works with tables, so you're right to approach it from that angle. However, some Gmail environments do not even look at embedded CSS (CSS within <head> section). You'll need to 'inline' the CSS (https://www.campaignmonitor.com/resources/tools/css-inliner/).
To center a table in Outlook, use the attribute align on the <table> element like so: <table width="300" align="center"...>. You may also need to wrap it all with <center>...</center>, even though that tag is deprecated (yes, email is that old!).
You'll find in general Outlook will support the attributes - e.g. for border colours, <td bgcolor="#abcdef"...> - whereas others will support the inline style, e.g. <td style="background-color:#abcdef"...>. You should use both, and not rely on embedded CSS.
I can update more specifically if you need, after posting the affected HTML.
Try this one.
.parentTable {
position: relative;
}
.childTable {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
please, I have a problem with terminal simulator. I want show one line in full length without wrapping of course but text (text-align: left of course). It's fine in desktop but if you will smaller the window you will see horizontal scrollbar. I solve this with max-width: 100vw but then scrollbar is still visible below the text. It's for desktop. I think that this is solved. But have you some better ideas for terminal emulator? What library is standard used which can copy your code, etc...? Thank for advice
My html scratch
<div class="terminal">
<pre class="terminal">cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>
and css scratch
.terminal {
// Layout
padding: 5pt;
border-radius: .5em;
display: inline-block;
// Colors
background-color: $secondary;
color: $color5;
// Text
font-family: monospace;
font-weight: $font-weight-bold;
line-height: $terminal-line-height;
text-align: center;
}
.terminal pre {
// Layout
overflow-x: auto;
margin: -17px; // This is for compatibility with mobile devices
// Text
text-align: left;
}
Don't worry about variables, I'm using Sass for normal programming. But I have some questions please:
It's needed to have negative margin? I read that it's for mobile browser compatibility. And yes, otherwise page is scroll-able which is really ugly. But the question is, existing most modern solutions for terminal emulator?
It's better use <pre> or <textarea> for terminal simulator? Thank you
Full my code is on my codepen
Thanks for any advice
PS: My desire is avoid Javascript or Bootstrap for now. Thank you for understand
Best Regards
If I understood well, please check if this is the behavior you're wanting to happen :
.terminal {
width: 90%;
height: 100px;
padding: 10px;
background: #000;
color: #0f0;
border-radius: 10px;
font-family: monospace;
text-align: left;
}
.terminal pre {
margin: 10px;
padding: 10px;
overflow-x: scroll;
overflow-y: hidden;
}
<div class="terminal">
<pre>cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>
You had both items with the same class which was conflicting with the browser applying the styling. And if you want the scrollbar to appear only horizontally, just make sure also to hide the vertical bar with overflow-y: hidden;.
Here's a fiddle, so you can resize the window and see it working responsively. Hope it helped!
JSFiddle
i'm creating a responsive layout but i'm noticing a centering problem. I have three div (three boxes, each one next to the other) and i put them into a parent div to make the alignment. The strange thing is that on dreamweaver all works perfectly, but when i open the HTML file to test the page locally the centering is not correct. Here's the images so that you can understand better.
On Dreamweaver
click
When i open the HTML page locally
click
In the first screen as you can see, right and left spaces are perfectly equal, in the second screen left space is more narrow. I'd love to know why on dreamweaver is ok. Here's the code i used.
#infoInner {
margin-left: 0.5%;
margin-right: -0.5%;
}
.boxInfo {
padding: 2% 2%;
margin: 0 1.5%;
width: 26%;
border: 1px dashed white;
float: left;
}
Browsers by default tend to add styles to the document. This is why projects such as normalize.css exist to remove them, however, this is not the solution to your problem.
When a web browser displays code, it's the rendering engine that interprets the code to then lays it out to the screen. Chrome uses Blink, Safari uses Webkit, Internet Explorer uses Trident, and so on. After a bit of research, I see that Dreamweaver used the Presto rendering engine until version 3, and then moved to Webkit on version 4 / 5. I am not sure about the version DW6, I am also going to assume it is Webkit (EDIT WELCOMED). You should receive a similar result if you open your code up in Safari.
I recommend you open a new question with your code represented in a jsfiddle for members of SO to help you out and get it the way you want to look. However, from the description and the code posted it seems to be a rendering issue.
Further Reading:
http://en.wikipedia.org/wiki/Web_browser_engine
http://mashable.com/2014/02/26/browser-testing-tools/
https://www.youtube.com/watch?v=7bs9RGolIyI (More for the comedy)
Can you do that on this way:
<div class="wrapper">
<div class="item"></div>
<div class="item center"></div>
<div class="item"></div>
</div>
.wrapper {
text-align: center;
width: 100%;
}
.wrapper .item {
float: none;
display: inline;
width: 32%;
margin: 0px;
}
.wrapper .item.center{
margin-left: 1%;
margin-right: 1%;
}
I hope this help! :)
I'm just trying to make the cursor a custom image. I have followed all instructions everywhere but it still will not work:
CSS:
body, html {
margin: 0px; padding: 0px;
border: 1px solid red;
cursor: url(images/rsz_red_crosshair.gif), crosshair;
}
The image is 32x32. The stylesheet is linked properly because the border is showing. The second option (the built in crosshair) works fine. Just wondering what I'm doing wrong, I'm sure it's fairly obvious to others.
Your style syntax is correct and I've implemented it myself just to be sure. I would confirm the location of your image.
This css should solve your problem. Include the URL in quotation mark and make sure path is correct.
body {
margin: 0px;
padding: 0px;
width:100%;
cursor: url('http://icons.iconarchive.com/icons/hopstarter/plastic-mini/32/Cursor-icon.png'), auto;
}
I am currently finishing a site that the client wants to work on all browsers. However, there seems to be a CSS issue which I can not get around. The border around this page seems to start from the middle of the page, as opposed to surrounding the entire page. It works on all other browsers though. I am guessing that it is a float problem, but the #contact-form underneath has basically the same CSS applied to it but the border still surrounds it, while the #info seems to have broken out of the border.
The webpage in question is http://lunaskymoda.co.uk/contact-us/
The only validation error is with an unregistered keyword "Nextgen", but i doubt that is the problem. I have spent an entire day tackling this and cannot seem to come up with a reasonable explanation as to why this is happening.
the CSS for the possible HTML elements producing the error are:
#main #main-content {
border: 1px solid white;
display: block;
margin: 12px 0;
background: black;
}
.contact #main-content .info {
margin: 10px;
width: 300px;
font-size: 14px;
color: white;
float: right;
display: block;
}
You're not the first one to have issues with ie6 :)
The problem is of course the "clear: both" of the clear class not being honoured, so you need to hack it.
Here's a possible approach:
http://damienhowley.wordpress.com/2009/04/01/ie6-hack-replacing-clearboth/
You may also try to replace the <div class="clear"></div> by <br clear="all">.