Hey guys so I have the follow:
http://jsfiddle.net/z3Hr2/
This is my nav that I use to access in JQuery, tables...here is a photo:
Now when I click one of the links a table pops up, like this:
The problem is that in IE there is a huge gap in between the top to the bottom, even though they are display:none ( the tables that are opened when clicking a nav link).
Here is what I mean in IE:
Here is the table containers layout:
<div class="csvemployeestools">
<div class="MemberopenstatusViewer">
<div class="OpenstatusViewertable">
table that is opened depending on which link clicked in nav....
</div>
<div>
.....
</div> <!-- after all tables are defined, this closes it out.
CSS:
.csvemployeestools{
margin-top: 2%;
overflow: hidden;
}
.MemberopenstatusViewer{
display:block;
/*float:left;*/
margin: 0 auto;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: .7em;
width:100%;
/*overflow-x: scroll;*/
}
.OpenstatusViewertable {
width:100%;
max-height: 300px;
overflow-y: scroll;
margin-bottom: 3%;
}
Hey guys I figured it out....I just removed the divs around the tables:
<div class="MemberopenstatusViewer">
<div class="OpenstatusViewertable">
</div>
<div>
Thanks though!
I don't know if this will help, but you should be using div IDs for layout not classes.
This is much better:
(class = . )(id = #)
But I'm not sure how this relates to this question.
Related
I am trying to create a mock up of a PSD file and i'm having trouble getting some tags at the bottom of a blog post to behave.
Here is a link to the image;
http://imageshack.com/a/img923/5718/rfVFqe.png
(I'm not allowed to post real images yet)
Here is my css code so far for it;
.comment { content:url(comment.png) ; height:auto; width:auto; }
and then in the html;
<div class="comment"><p>comments</p></div>
the text does not appear at all however. I'm not sure if I can make it work this way?
Thanks all.
I did a similar thing for a footer of a page recently, but I had to use img and p tags.
<div class="comment">
<img src="svg/phone.svg" alt="Phone">
<p>800-888-0123</p>
<img src="svg/email.svg" alt="Email">
<p>billy#billsplumbing.ca</p>
</div>
That was my markup, and my CSS looked something like:
div.comment *{
display:inline-block;
margin:0 .2rem;
}
div.comment p{
margin-right:1rem;
}
div.comment img{
height:25px;
width: 25px;
}
I don't know if this is quite what you're looking for, but this is how I did basically what you are showing.
Why not use background: url(comment.png) instead? And then add some padding-left to the div.
Code:
.comment{
background: url('https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/bubble-24-24.png') no-repeat;
padding-left: 30px;
height: 24px;
float: left;
margin-right: 10px;
}
.comment p{
margin: 0
}
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
So I'm extremely new to this html and css thing and I've got a bit of a problem. I'm in the middle of cutting a site for the very first time, but I'm having issues with the positioning of my sub navigation.
My issue is that the Sub Nav on my FAQS Page is being pushed off center and towards the right in the browser. But then, the subnav on the other pages like 'support', which use exactly the same html structure and css style as the one on the FAQS page, are fine and perfectly centered.
When I 'inspect element' in the browser, it seems to be thinking there's an extra subnav button on the left hand side and that the FAQS subnav button is positioned in the middle of the subnav , if that makes sense?
There's a second FAQS Page in the folder which works...but that was made by literally copy and pasting the code from the support page and then cutting out the bits that weren't needed, then copying in the parts from the FAQS page that I needed onto this .html instead.
So I have a feeling it's just a typo or a syntax error or something realllllly simple. I just really want to know what I did so I can avoid it in the future and know how to fix it.
Here is the html for my sub nav ( & page title ):
<div class="grid grid-pad">
<div class="col-1-1">
<div class="subnav clearfix">
Support
FAQS <div class="triangle"> </div>
Swifd Forum
Video Tutorials
</div>
<div class="pagetitle">
<h1 class="pageheading"> FAQS </h1>
<div class="pageheadingborder"> </div>
<h2 class="subtitleFAQS"> Got questions that need answering? <strong> we've got you covered</strong></h2>
</div>
</div>
</div>
And Here is the CSS so far:
/*---------------- SUB NAV ---------------*/
.subnav {
margin: 0 0 60px 0px;
text-align: center;
}
.subnav a {
display:inline-block;
font-family:'Bebas Neue', 'Oswald', Arial, sans-serif;
color:#ffffff;
background-color:#000000;
line-height: 1.5;
font-weight:bold;
text-transform:uppercase;
font-size: 23px;
margin:5px;
width: 180px;
position: relative;
transition: all 200ms ease 0s;
}
a.b1.subactive {
background-color: #ee812c;
}
a.b1.subactive div.triangle {
width: 0;
height:0;
border-style: solid;
border-width: 15px 32.5px 0 32.5px;
border-color: #ee812c transparent transparent transparent;
position: absolute;
top:100%;
left: 50%;
margin-left: -30px;
z-index: 2;
}
.subnav a:active {
top: 2px;
}
I know it's a bit rusty, but any help would be greatly appreciated.
Here is an extremely basic model : https://jsfiddle.net/2Ly4v9qu/
Thankyou!
I have a problem here i am getting space around this text i was not able to get rid off.
i cannot apply globally padding:0 or margin:0 to the all divs. My div is part of the page i want to remove extra space around my div alone i cannot apply padding:0 or margin:0 to body also.
<html>
<body>
<div class="topcont" id="topcont" style="display: block;padding:0px;margin:0px">
<div id="dragcont" style="display: block;padding:0px;margin:0px">
<div style="padding:0px;margin:0px; text-align: center; font-size: 18px; font-weight: bold; font-family: Helvetica Neue;">
Drop up to 5 photos here
</div>
<div style="padding:0px;margin:0px; font-size: 18px; font-family: Helvetica Neue; border: 0px none; height: 18px; text-align: center;">
Or
</div>
</div>
<div style="padding:0px;margin:0px;color:#333; text-align:center; font-size:14px;font-family:Helvetica Neue">
to add them as attachments
</div>
</div>
</body>
</html>
I dont know why i am getting space above the given texts.
You can easily set margins to 0 using the following on any element.
#myDiv{
margin:0px;
}
Note the 0px; and not 0;
For rendering/optimization purposes its good to include the unit of measurement (e.g. px,em,etc)
You need to set the margins to 0 for the elements that border it, depending on the rest of the layout possibly for the relevant directions only.
http://jsfiddle.net/sCj6y/1/ here you go but you should not style elements in the HTML file.
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
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.