The following page http://drivenowcard.com/form.php works great on Chrome but when loaded with Firefox you'll notice that the form is off to the right quite a bit.
I'm new to CSS so what did I do wrong or what does Firefox do differently then Chrome?
HTML
<div id="beforeForm">
<h2 id="customer" class="textFont">Customer Information</h2><h2 onclick="redirect('http://drivenowcard.com/privacy.php');" id="privacy">Privacy Notice</h2>
<p hidden="" id="required">* Indicates a required Field</p>
</div>
<form id="actionForm" action="ajax/process.php" method="post">
<!-- form contents -->
</form>
Note:
This project is using Bootstrap 3
You need to clear a left float that is cascading down from: <h2 id="customer" class="textFont">
This is the float in your CSS (don't change this)
#customer {
float: left;
}
This is the CSS you need to add to your stylesheet to clear the float
#actionForm {
clear: left;
}
Related
Navbar search is broken on chrome 50+ using either of these versions:
materialize 0.97.6
materialize 0.97.5
Code used is as described in the documentation:
<nav>
<div class="nav-wrapper">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
this code leads to visual issues as depicted on the documentation page as well as my site:
http://materializecss.com/navbar.html
How do i fix this to make it look uniform?
I just noticed this today and I just did this:
input[type="search"] {
height: 64px !important; /* or height of nav */
}
Alright I was having the same issue. However, I added this CSS and it worked for me.
nav .nav-wrapper form, nav .nav-wrapper form .input-field{
height: 100%;
}
I am using a CMS which when building a form wraps all it's contents with what it calls an "anonymous div" to comply with XHTML, unfortunately the theme was designed without this insight and there fore the submit button CSS is:
.contact form div.control input[type=submit]
This works if the markup is:
<section class="contact">
<form>
<div class="control">
<input type="submit" />
However because this additional DIV added by CMS:
<section class="contact">
<form>
<div>
<div class="control">
<input type="submit" />
How can I write the CSS a bit more adaptive so extra markup doesn't affect it so much, but without styling the individual element via ID or class???
Alex
Your selector should still select the input, the div won't affect that. If the div is causing layout problems, you might need to make it an inline element like this:
section > form > div { display: inline }
You should be able to just add:
.contact form div div.control input[type=submit]
or
.contact form div .control input[type=submit].
Either should work fine.
Using CSS I am running into trouble getting a div later on the page to show up using the hover command over an img tag. I'm writing the page using Bootstrap 3 - Any idea why this may be a problem? The words in "hovershow" appear at the right spot on the page when they are not originally hiden using CSS which makes me think there's a problem with the command itself.
HTML
<div class="col-md-4 col-sm-4">
<img id="Email_Logo" class="featurette-image img-responsive" src="img/Email_Icon_Send1.jpg" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="hovershow"><p>This should show on hover</p></div>
</div>
</div>
CSS
.hovershow{
display:none;
}
#Email_Logo:hover .hovershow{
display: block;
}
That's definitely not how CSS works.
The following CSS implies there is an element .hovershow somewhere within #Email_Logo:
.#Email_Logo:hover .hovershow{
display: block;
}
And well... that's not the case. What you want can either be achieved by some easy Javascripting or a change in your HTML 'tree' and CSS.
As seen below "Share this awesome read: " at the end of the article.
I've tried various CSS changes, but can't get it to align.
http://poachedmag.com/2012/11/01/laneway-festival-singapore-line-up-released/
Add this to your css and try again:
div.share iframe.twitter-share-button { position: relative; top:3px; }
I had the same issue. I ended up putting each in their own div with the style property float:left and for the twitter holder, I added margin-top:3px and that seemed to be enough to make it line up nicely
<div style="float:left">
<!-- FACEBOOK BUTTON -->
</div>
<div style="float:left;margin-top:3px">
<!-- TWITTER BUTTON -->
</div>
<div style="clear:both"></div>
http://healthybodyguru.com
If you load the site and wait 3 seconds you'll see the attentionGrabber bar appear in the header. It has shortcodes to add the social buttons (FB, Twitter, G+1), but for some reason the Google +1 button is too high.
I've tried adding custom CSS to lower it by adding margin/padding to the top but that didn't make a difference.
Any ideas what CSS I can use to make it line up with the other social buttons?
Thanks!
Try setting:
#___plusone_0 {
font-size: default; !important
}
Override inline CSS styles with !important.
The solution was to add:
#attentionGrabberWrap .plusoneBtn iframe{
margin-bottom: -3px !important;
}
I got help from the plugin creator :)
try putting a span tag around the google +1 button and pad that top.
<span style="padding-top:5px;">[shortcode]</span>
I don't know if you tried this with custom css but if not give it a shot and see what happens. a style tag in the html should override any styling that the stylesheet is giving the element.
As you can see I like divs and not spans. I've always gotten better results from divs than spans when css is playing around.
<div id="attentionGrabber">
<div id="centeredPart" style="width: 575px; margin:0 auto">
<div style="float:left;" class="facebookBtn">
...like code....
</div>
<div style="float:left;" class="twitterBtn" >
...twitter code...
</div>
<div style="float:left;" class="plusoneBtn">
...+1 code...
</div>
<div style="float:left;" class="linkToForums">
Check out our new forums:
<a class="link" href="http://healthybodyguru.com/forum/">go!</a>
</div>
<div style="clear:both"></div>
</div>
<div id="closeAttentionGrabber"></div>
</div>
I just put an invisible letter behind mine. A bit hacky but it worked for me.
<br><div class="g-plusone" data-annotation="none"></div><span style="font-size:33px;opacity:0;">G</span>