UPDATE #2: I have solved almost all my issues bar the one major one. With the same structure and CSS IE7/6 displays each a with 100% width of it's container. I need this to no happen. Besides that everything else is fine. Can anyone enlighten me?
UPDATE: Should Look Like This
I have the following html page (detailed below). It simply renders 2 styled buttons from the links. My problem is IE6 & 7 renders it differently than Firefox, Safari, IE8 and Chrome that all render it correctly.
I have been banging my head against the wall for a day now trying to make it work in IE6/7. Can anyone offer advice as to what I am doing wrong?
Thanks
<html>
<head>
<style>
.niw-button {
background: #1f81c0 url(niw-btn-gradient-normal.png) repeat-x;
border: none;
color: #fff;
display: inline-block;
font-weight: bold;
margin-right: 6px;
min-width: 95px;
padding: 2px;
text-decoration: none;
}
.niw-button:hover {
background: #5e698f url(niw-btn-gradient-hover.png) repeat-x;
}
.niw-button > .niw-button-contents {
border: 1px solid #73b1da;
}
.niw-button > .niw-button-contents:hover {
border: 1px solid #99a1bc;
}
.niw-button .niw-button-icon {
background-position: center;
background-repeat: no-repeat;
float: right;
height: 25px;
width: 27px;
}
.niw-button .niw-button-text {
height: 25px;
line-height: 1.5em;
padding-left: 5px;
padding-right: 27px;
text-align: center;
text-transform: uppercase;
}
.right-align {
float:right;
}
.niw-icon-cancel {
background-image: url(niwater_cancelIcon.png);
}
</style>
</head>
<body>
<a class="niw-button right-align" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
<a class="niw-button" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
</body>
</html>
EDIT: Now that I understand your image:
Just make your <a> elements block elements with display:block and put some kind of span inside of them to hold the icon. Or you could make the whole thing an image...
IE6/7 doesn't support display: inline-block, IE6 doesn't support the child (parent > child) selector. So you probably should look into those points in your css...
Edit: I actually don't get correct rendering in IE8, which is what I address below:
For a start, you should put the <a> elements inside the elements rather than the other way round. Block level elements shouldn't really exist within inline elements. e.g.
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button right-align" href="#">Cancel</a></div>
</div>
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button" href="#">Cancel</a></div>
</div>
This fixes the positioning for me but there is a subsequent loss in styling. I haven't tinkered with the CSS to correct that yet but it should be straightforward. Secondly, you have an awful lot of classes to deal with a straightforward issue. Arguably you should only need one class in the outer div to identify what's happening inside, and then your CSS can descend from there.
Just one tip for a resource to the button/link problem in general:
http://mezzoblue.com/archives/2008/09/17/anchor_butto/
I'm actually confused myself. How are they supposed to look? If you don't let us know what you're intending to do, it's very difficult to fix the problem.
Related
I am still working on improving my first website project. One issue that is repeatedly causing me a headache is that some sections keep overflowing into those above. When I say overflow, I mean that when I click on the element in brackets, when hightlighted in the live preview, it is showing the margins to actually be around other content above (as shown in picture). This is happening with various sections of my website an I cannot understand why. I am a total beginner here so i'm sure theres a simple reason as to why and how to fix it universally across the website.
Overflow issue in this image
For some sections I can overcome this with the 'overflow: none" property but ideally i'd like to solve this without the need to repeatedly use it. Note, the overflow none property isnt working for all sections, in particular the one I have shown an image of. Could anyone give some clarity here please?
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #f6f8fa;
color: #4E6E9B;
font-family: 'Signika', sans-serif;
font-weight: 'E';
}
/* END GENERAL STYLES -----------*/
.one-third-container {
float: left;
width: 100%;
overflow: hidden;
}
.about-one-third {
width: 33.3333%;
padding: 2% 0;
float: left;
text-align: center;
background-color: #0066B2;
color: #f6f8fa;
}
.about-one-third i {
font-size: 8rem;
padding-bottom: 5%;
}
/* END ONE THIRD SECTIONS ------*/
.services-offered {
padding-left: 0;
margin: 2% 5%;
-webkit-padding-start: 0;
list-style-type: none;
overflow: none;
}
.services-offered li {
display: inline-block;
width: 20%;
vertical-align: top;
padding: 0 0 0 1.8rem;
text-align: justify;
}
.services-offered li:before {
content: "\f00c";
font-family: FontAwesome;
width: 1.8rem;
margin-left: -1.8rem;
margin-right: 0.5rem;
}
/* END SERVICES OFFERED ---------*/
<!DOCTYPE html>
<html>
<head>
<title>W Gooderham Gas Services</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,700|Signika:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>[enter image description here][1]
<div class="one-third-container">
<section class="about-one-third">
<td>
<i id="third-border" class="fa fa-calendar"></i>
</td>
<h2>Routine Servicing</h2>
</section>
<section class="about-one-third" id="centre-third">
<td>
<i id="third-border" class="fa fa-wrench"></i>
</td>
<h2>Installation</h2>
</section>
<section class="about-one-third" id="breakdown">
<td>
<i class="fa fa-snowflake-o"></i>
</td>
<h2>Breakdowns</h2>
</section>
</div>
<! END ONE THIRD SECTION --------------------->
<ul class="services-offered">
<li>
Installation and commission of natural gas central heating systems.
</li>
<li>
Routine servicing of all natural gas appliances including warm air units.
</li>
<li>
If any of your gas appliances breakdown, we provide a 7 day a week callout service to get them back up and running.
</li>
<li>
We can provide gas safety landlord certification for all gas appliances in your properties.
</li>
</ul>
The reason the elements "overflow" to the elements above is because you used float: left; on the class one-third-container (which is fine!). But if the element below doesn't have any float you get the unwanted result of the element getting pushed higher than intended. If you add float:left; to the ul (or the class services-offered) you can prevent this issue.
Edit: Removing the float:left would also work in this case, as the element doesn't need to be floated.
Edit 2: Floats are indeed not that much of the go-to-choice as they were a few years ago. Uncleared elements are a common issue when using floats, which is why flexbox is considered to be better. Flexbox has alot of use cases that simplify many layout problems, that are a little trickier to solve without flexbox. However using flexbox on every element without paying any thought to it can produce unwanted results like for example this:
.container {
height: 500px;
display:flex;
}
<div class="container">
<img src="http://via.placeholder.com/350x150">
</div>
In the code snippet the image is skewed. You can fix this pretty easily by adding align-items to the .container, but the point is, that using flexbox on all elements can possibly cause issues, where they are unneccessary.
That said, using flexbox is definitely a good thing as long as you are paying attention to the elements you're applying it to.
I have been looking for a way to center an anchor tag vertically according to a span tag, which are both encased within div tag.
My HTML
<div id="project_list">
<div class="title">
Example Project
<span class="show_details">Show Details</span>
<div style="clear: both"></div>
</div>
</div>
My CSS
div#project_list {
border: 2px solid #000000;
}
div#project_list div.title {
background: grey;
padding : 10px;
}
div#project_list div.title a {
font-size: 1.231rem;
}
div#project_list span.show_details {
background: orange;
float : right;
padding : 13px 5px;
}
I have also create a JSFiddle here, so you may see what I am speaking about.
Thank you to everyone in advance as I have been racking my brain on how to do this for a couple days now.
You could set the line height to match the button height:
a { line-height:46px; }
Note: I just used a but you will probably want to add a class so the style doesn't get applied to all anchor tags.
http://jsfiddle.net/GxqTh/2/
#OpenNoxdiv- try adding padding to your a tag; 20px seemed to center nicely for me. - see below
#project_list div.title a {
padding-top:20px;
}
I'm currently building a theme / style for a piece of software.
Currently, the code looks like such:
http://jsfiddle.net/afseW/1/
The relevant code is:
body div[type*=privmsg] .sender {
font-weight: 700;
width:134px;
text-shadow: #fff 0px 1px;
background-color: #eee;
min-height:22px;
border-right: 1px solid #dcdcdc;
padding-right:5px;
text-align:right;
display:inline-block;
overflow: auto;
}
Note that in fiddle, for some reason, the text is collapsing onto the second line, whereas in the client, the image looks like this:
Granted, a span is not meant to be a block, hence I've given it the property of: display: inline-block;
But how do I get the height to inherit the parent p block?
I changed DOM structure. See the inline style. In the first div (.message) I prefer a better solution adding a .clearfix class, see this.
<div class="message" type="privmsg" style="overflow: auto;">
<div class="sender-cont" style="width: 30%; float: left;">
<span class="sender" ondblclick="Textual.nicknameDoubleClicked()" oncontextmenu="Textual.openStandardNicknameContextualMenu()" type="myself" nick="shamil" colornumber="20">+shamil</span>
</div>
<div style="width: 70%; float: left;">
Welcome to <span class="channel" ondblclick="Textual.channelNameDoubleClicked()" oncontextmenu="Textual.openChannelNameContextualMenu()">#textual-testing</span>! This channel is for the users of the Textual IRC Client to test scripts and do other activities in an unregulated environment. — <span class="inline_nickname" ondblclick="Textual.inlineNicknameDoubleClicked()" oncontextmenu="Textual.openInlineNicknameContextualMenu()" colornumber="3">milky</span>'s law states: "On IRC, after a user has executed a command that outputs interesting information to a channel (i.e. /sysinfo), then there will be at least two users that do the same."
</div>
</div>
Hope this helps!
Since the spans are a set width, probably the easiest thing to do here is just make the span have a absolute position.
body div[type*=privmsg] .sender,
body div[type*=action] .sender {
position: absolute;
top: 0;
bottom: 0;
left: 0;
...
}
Then add padding to the parent element:
body span.message {
position: relative;
padding-left: 140px;
...
}
http://jsfiddle.net/afseW/3/
PS: please provide a trimmed down version in jsfiddle next time, the html and css here is pretty epic.
CSS:
.share {
width: 150px;
height: 20px;
background: #000;
float: right;
white-space: nowrap;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 3px;
background-color:rgba(255, 255, 255, 0.5);
border-bottom-left-radius: 5px;
box-shadow: 0px 0px 10px #888;
vertical-align: top;
}
HTML:
<div class="share">
<div class="fb-like" data-href="http://bronies.info/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" style="width:47px; overflow:hidden; top:-3px; left:3px;"></div>
Tweet
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" style="width:32px; overflow:hidden;"></div>
</div>
Chrome, Safari:
Internet Explorer, Firefox, and Opera:
If you can see what I did in my HTML style property, I used top:-3px, and I did this before testing my website out on other browsers (Chrome is my primary web browser). I used top because a quick Google search led me a page instructing me to do so. Now that this solution doesn't work, how would I adjust it to align and work on all web browsers?
My solution is:
.fb-like.fb_iframe_widget span{
vertical-align: top !important;
}
You should remove top:-3px; completely. Because you don't have position:relative;, which is required (something other than static) to activate positioning, then Webkit (Chrome, Safari) is correctly ignoring it, but Internet Explorer, Firefox, and Opera are mistakenly honoring it (-3px shift).
EDIT:
From the comments...
Facebook's script adds a <span> inside your <div> which then triggers a CSS rule they also provide: .fb_iframe_widget span { vertical-align: text-bottom; }. I suggest adding float: left; to all three of your <div> tags so they will not share a common flow (or baseline).
try using top: auto and look at the result, check and see if it is in the same position in all browsers. If it needs to be aligned virtually then use bottom: 3px; (or any appropriate value that suites your need)
do not forget you have to position:relative; to your code
so the final styling for the facebook button should look something like this :
width:47px; overflow:hidden;position:relative; top:auto; bottom:3px; left:3px;
I suggest using display: inline-block; and vertical-align: middle; for container of Facebook button ...
I added vertical-align: text-bottom; to the <span> enclosing each button (to match what Facebook does), and everything lines up perfectly in Chrome, Firefox, and IE. (My spans also have display: inline-block if that matters.)
Try adding this to your "share" div. I don't know how it looks on other browsers but it seems to make things line up in Chrome.
font-size: 0.1px;
I ended up wrapping each button in their own div, and setting the div to
display:inline-block; white-space: nowrap; vertical-align:top;
and then added the following to the facebook specific div:
#facebookButton > div > span {vertical-align:baseline;}
Adding the following style to my css aligned the facebook share button with other social icons.
.fb_iframe_widget{vertical-align:top;}
This is my solution: Wrap each social button by an inline-block element. And each social button has display attribute is block
HTML
<div class="social-share clearfix">
<div class="social-share-item">
<div id="fb-like" class="fb-like" data-href="{url}" data-layout="button_count" data-size="small" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div class="social-share-item">
<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
</div>
<div class="social-share-item">
<div class="g-plus" data-action="share"></div>
</div>
</div>
CSS
.social-share {
display: block;
background: #f9f9f9;
padding: 0.2em 0.4em;
margin-top: 1em;
}
.social-share-item > * {
display: block;
float: left;
}
.social-share-item {
display: inline-block;
}
I was having the same problem with mobile browsers and solved it with the following:
.fb-like span{
vertical-align: initial !important;
}
At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.
Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/
I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.
I tried adding another table to the mix but that didn't help.
Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.
And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.
Thanks,
Paul
UPDATE: Incorporating #Jeremy B's suggestion
Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.
Look at the modification here: http://jsfiddle.net/TcRxp/8/
I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from #Jeremy B
Essentially, the logic for the layout is
Draw the float-right content
Draw the float-left content
Draw the content in the middle (as it will now render to the right of the float-left content.
First make your top span a block element to stack them:
<span class="color status active bold" style="display:block">Status:</span>
then float the middle div left as well:
add float:left to #headmiddle in your css
It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.
I would suggest simplifying your HTML:
<div id="headleft">a little search form here</div>
<div id="headmiddle">
<div class="active"><strong>Status:</strong> Active</div>
<div class="search">Search results displayed</div>
</div>
<div id="headright">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
and your CSS:
div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.
If you need to do it with CSS, see my changes: Fiddle
I added the following:
#headmiddle span.status { display: block }
This will cause your spans to "stack".
I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:
<style type="text/css">
.leftit {
float: left;
}
.rightit {
float: right;
}
.centerit {
width: 30%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.centerpage {
width: 80%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>
(fiddle for above)
I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.
Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.
The final code (fiddle):
.leftit {
float: left;
font-size: 0.8em;
}
.rightit {
float: right;
font-size: 0.8em;
}
.centerit {
width:220px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
}
#headmiddle div {
border: 1px solid #000;
margin-bottom: 3px;
}
.centerpage {
margin-right: auto;
margin-left: auto;
text-align: center;
}
strong { font-weight: bold; }
.search { background: orange; }
.active { background: #8ed200; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
<div class="centerpage">
<div class="leftit">a little search form here</div>
<div class="rightit">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
<div class="centerit" id="headmiddle">
<div class="active"><strong>Status:</strong>
Active</div>
<div class="search">Search results displayed</div>
</div>
</div>
Thanks to all the great answers - I learned a lot from this question.
Paul