I have narrowed down the culprit to either a SPAN or a DIV in lines 27-33 but cant quite get it... if i remove the span that makes the font below the press muted, it fixes the spacing issue at the top of the page but makes that text way to large
u.neighborrow.com/items/indexb
<div id="slide_one" class="bg"><!--slide #1-->
<div class="slide-content">
<div class="nhome">
<div style="margin-top:22px;color:#000;font-size:30px;margin-left:200px;width:408px">
The cheaper, greener, easier, better way to have stuff.
<span style="font-size: 13px; position: relative; top: -2px"> <br /></span>
<?php echo $form->create('Item', array('controller' => 'items', 'action' => 'recent/2')); ?>
<div class="input text required">
<label for="ItemItem"></label><input type="text" id="ItemItem" value="" maxlength="255" style="font-size: 25px; width: 200px; margin: 5px 0pt;" name="data[Item][item]">
<input type="submit" value="Search" style="font-size: 22px" />
</div>
<?php echo $form->end(); ?>
<div style="font-size: 13px; position: relative; top: -2px; line-height: 1.4em;"> <strong>Search Tips:</strong> Need a camera or a book for a trip? Want to try an iPAD before you buy it? Need a tool for a project or a tent for an event? <br />
Borrow these things from your neighbors, The <i>owner</i>-ship has SAILED!</div>
<span style="font-weight:normal;color:#ccc;font-size:14px;line-height:20px">Still not sure what to borrow? <br />
Browse the borrowables or <br />
Lend something safely and securely<br />
</span>
<div>
<div style="padding:5px;text-align:center"><img src="/images/press_wide.jpg"></div>
<span style="font-weight:normal;color:#ccc;font-size:14px;line-height:20px"> The media adores us, our users love us,our friends <i>like us</i>,
<center><iframe src="http://www.facebook.com/plugins/like.php?href=www.neighborrow.com&layout=standard&show_faces=false&width=350&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height: 30px; text-align: center;margin-top:0px;"></iframe></center>
(oh yeah, and mother earth has a crush on us:)</div></span>
<hr color="#CCC" />
</div>
</div>
</div>
</div>
</div>
and i know i need to get rid of the inline styles:)
got some crazy margins:
<div class="main-content" style="margin-top:200px">
It's in div class="main content" style="margin-top: 200px"> It seems to be inline on line 325
Related
I know there's a ton of similar questions about this on here, but none seem to address the issue for me.
css code:
/*Deferred Payment Popup*/
div.DeferredPaymentPopup {
}
div.DeferredPaymentPopup input.RefreshImage {
background-image: url(../Images/Refresh-icon.png);
background-position: left top;
display: inline-block;
float: left;
width: 15px;
height: 18px;
}
Code on page -
<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
<div data-bind="with: statement.viewModel.DeferredPaymentModel">
...
<div id="divDollarCalc">
<div style="float: left; padding-left: 4px">
<input type="image" onclick="return false;" title="Refresh" class="RefreshImage" />
</div>
</div>
There's a number of nested divs on the page, and a couple of them have their own IDs - I included one of them for illustration.
No issues in IE or Edge.
All looks well on inspect in Chrome:
Thoughts?
You can use src attribute of input[type=image]
<input type="image" src="../Images/Refresh-icon.png" />
Clarification for the questions from comments:
For input[type=image] and img tags in chrome, if there is no src attribute or invalid src attribute, browser shows the icon of broken image which is not background, that's why you cant override it from css background.
However img tag is not showing the icon when there is no src attribute at all, it is showing only when the value of src is invalid.
But for input[type=image] it is showing up even when there is no src attribute, this behavior is different for img and input[type=image].
I don't know the exact reason behind that, but my guess is that may be src is optional for img but not for input[type=image].
As per the problem input[type=submit] not working, if you can provide the new code you have tried we should be able to help you with that.
This is a small experiment that shows how it works
<p><strong>input type="image"</strong></p>
<p>Without src</p>
<input type="image" style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<p>With src</p>
<input type="image" style="display:inline-block;width: 40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png"/>
<br />
<br />
<p><strong>input type="submit"</strong></p>
<p>With background</p>
<input type="submit" style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<br />
<br />
<p><strong>img</strong></p>
<p>Without src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<p>With empty src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src />
<p>With invalid src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src="//avcs" />
<p>With valid src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png" />
Use .DeferredPaymentPopup, input.RefreshImage{...} because RefreshImage is not a child of the DeferredPaymentPopup div
Edit
Is this what you intend to achieve? Instead of input type="image" , I used text
div.DeferredPaymentPopup {}
div.DeferredPaymentPopup input.RefreshImage {
background: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg") no-repeat left top;
display: inline-block;
float: left;
width: 100px;
height: 18px;
}
<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
<div data-bind="with: statement.viewModel.DeferredPaymentModel">
<div id="divDollarCalc">
<div style="float: left; padding-left: 4px">
<input type="text" onclick="return false;" title="Refresh" class="RefreshImage" />
</div>
</div>
</div>
</div>
Use .DeferredPaymentPopup, input.RefreshImage{...} because RefreshImage is not a child of the DeferredPaymentPopup div
I have been trying to style my "contact us" slider window but for my lack of knowledge (started website designing only a month back for my own project) I am kinda stuck.
The functionality is working great, but there are a few issues:
"contact us" text and a image that I am trying to get in a line is
not working.
in collapse mode, div containing text "contact us" is getting
reduced width wise.
Please excuse my not-so-technical language, since I am new to the concept.. Please refer my website koncreteplanet.com.. also, I have created a jsfiddle to give a glimpse of the code I am using (https://jsfiddle.net/jjff2o2x/). Thanks in advance!!
Javascript code:
jQuery("#ContactUs_header").click(function () {
jQuery('#slideContactUsbox').slideToggle('slow');
});
HTML / PHP code:
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4" id="contactus-panel">
<div class="contactus-panel">
<div id="ContactUs_header" class="contactus_footer" >
<p>Contact Us</p>
<img align="right" width=auto height="40px" src= "<?php echo bloginfo('template_directory') . "/image/handshake.png" ; ?>">
</div>
<div id="slideContactUsbox" class="contactus-extended">
<div class="container" style="width:300px;align:left;" id="MailUs-Panel">
<form name="Form-MailUs" id="Form-MailUs" method="post" action=<?php echo (get_template_directory_uri() . "/contactus/html_form_send.php"); ?> >
<div class="">
<input type="text" class="form-control mailflds" name="first_name" id="first_name" maxlength="50" size="30" placeholder="Name">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="email" id="email" maxlength="80" size="30" placeholder="E-Mail">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="telephone" id="telephone" maxlength="30" size="30" placeholder="Mobile / Landline Number">
</div>
<br>
<div>
<textarea name="comments" id="comments" class="form-control mailflds" maxlength="1000" cols="25" rows="6" placeholder="Enter your comments"></textarea>
</div>
<br>
<div>
<Button class="btn btn-primary btn-block btn-custom" id="Submit_MailUs" name="Submit_MailUs">Submit</Button>
</div>
<div id="ack-mailus-err" style="color:red;font-family:garamond;font-size:18px;text-align:center;">
</div>
</form>
</div>
<div id="ack-mailus" style="color:green;font-family:garamond;font-size:18px;text-align:center;">
</div>
</div>
</div> <!-- end of contactus panel -->
</div>
</div>
CSS code
.contactus-panel{
position:fixed;
bottom:0;
z-index:9999;
}
.contactus_footer{
position:relative;
/*z-index: 10; */
/*float:right; */
text-align: left;
line-height: 1.5;
cursor: pointer;
padding: 5px 2px 4px 15px;
font-family:'Raleway', garamond, sans-serif;
font-size:20px;
background-color: #084000;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
position: relative;
width: 100%;
vertical-align:center;
float:left;
}
.contactus_footer a {
color: #fff;
}
.contactus-extended{
background-color:#fff;
padding-top:20px;
padding-bottom:20px;
}
slideToggle() is jQuery method. Please using jQuery.
https://jsfiddle.net/pgqnjdvp/
I was able to resolve both parts of the issue.. can't believe it was that simple.. for part 2: I just added width exclusively to the container and it ceased to exist... also resolved part 1 of the issue.. added float and vertical-align:middle to both the text and img element styling too in addition to the div class and got the desired result.
Given the following example, what would be a good approach to position the Search button in line with the date input controls?
I gave it a shot with Bootstrap (2 rows, 3 columns) but the layout should stick to the left and keep the 3 logical columns together. And maybe there's an easier solution I am overlooking.
JS Bin HTML
Note: based on the simplified output from Telerik's Kendo UI combined with ASP.NET MVC.
Flexbox requires IE10+
Here is the solution that works everywhere and won't break bootstrap's responsiveness http://output.jsbin.com/ladezahija/1/
Idea is to apply to elements (blocks with date and search button) next rule:
.element {
display: inline-block;
vertical-align: bottom;
}
In an example I had to use float: none to redefine previously added property by bootstrap.
Also make sure you add a separate class for container and inner elements you work on.
I would go with CSS Flex.
using this CSS would align them for you. (you will need some vendor prefixes)
$("#datepicker").kendoDatePicker();
$("#grid").kendoGrid({
dataSource: [
{ foo: "foo", bar: "bar" }
]
});
.container-fluid {
display: flex;
justify-content: space-around;
}
.container-fluid > div {
align-self: flex-end;
}
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div class="container-fluid">
<div style="margin: 20px; float: left;">
<h4>
<label for="StartDate">From</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="startDate" class="k-input" id="startDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="startDate_dateview" style="width: 100%;" type="text" value="1-11-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<h4>
<label for="EndDate">To</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="endDate" class="k-input" id="endDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="endDate_dateview" style="width: 100%;" type="text" value="24-12-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<button tabindex="0" class="k-button" id="applyFilters" role="button" aria-disabled="false" data-role="button">Search</button>
</div>
</div>
You didn't used bootstrap properly. Anyway I have two solution.
First Solution:=> Add a blank h4 <h4> </h4> into last div.
Second Solution:=> Use margin-top:60px to k-button.
Some CSS on my screen seems to be automatically giving itself a margin from the top but not showing it correctly.
Example:
The green box is inside the image.
I have a feeling this is breaking the format I want which is to have the logo too the left and the contact and search bar too the right:
Here is my CSS:
.span6 img {
float: left;
}
img.logo {
float: left;
max-width: 350px;
height: auto;
}
#contact
{
float: left;
font-size: 2em;
color: black;
}
and my HTML:
<div class="row top-header">
<div class="span12" data-motopress-type="dynamic-sidebar" data-motopress-sidebar-id="header-sidebar">
<?php dynamic_sidebar("header-sidebar"); ?>
</div>
</div>
<div class="row">
<div style="" class="span6" data-motopress-type="static" data-motopress-static-file="static/static-logo.php">
<img src="http://bradlyspicer.net/autokentcare/wp-content/uploads/2014/01/logo2.png" class="logo">
<div id="contact"><span style="margin-left:50px; float: left;">01843 123456<br><div style="margin-top:15px; display:inline-block;"><form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div><input type="text" size="12px" name="s" id="s" value="Write your search and hit Enter" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="submit" id="searchsubmit" value="Search" class="btn""/></span></div>
</div>
</form></span>
</div>
URL: http://www.bradlyspicer.net/autokentcare/
After doing suggested changes this happens when I shrink the window:
You have your logo and search bar inside of a div that has a width set on it to 560 (span6 class) If you remove that class it should work a bit better for you.
Im trying to get descriptions next to a 485 wide picture, I did it on my ways, but when trying to add a new line with the same picture and description something like this:
(source: gyazo.com)
But when I copy and paste the exact same line of code and add margin-top to that div, or even <br /> it won't make any space between them, that's how it is looking now:
(source: gyazo.com)
What is causing that? very interesting..
I am using twitter bootstrap framework.
Code:
<body>
<div class="container">
<div class="works">
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
</div>
<br />
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
</div>
</div>
</div>
<br />
</body>
CSS
.name-col {
color: #d3d3d3;
}
.title-col {
color: #b2b2b2;
float: left;
position: relative;
top: 7px;
}
.field2 {
margin-top: 50px;
}
.works {
margin-top: 10%;
}
.examplefloat {
float: left;
border: solid 1px #000;
margin-left: 50px;
}
.tag_webdesign {
background-image: url("../img/web-design.png");
width: 89px;
height: 37px;
float: left;
}
.work1 {
float: left;
}
Live preview:
http://justxp.plutohost.net/themetheory/portfolio.html
What is causing that problem?
Thanks
Add this rule to your CSS
.field1 {
margin-bottom: 30px;
overflow: hidden;
}
This will clear the floated elements in your .field1 container and apply a margin of 30px to its bottom.
Find the end </div> that pairs with the <div class="works">
Add above that end </div>:
<div style="clear:both"></div>
Should look like this.................
<body>
<div class="container">
<div class="works">
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
<div style="clear:both></div> //MY ADDITION
</div>
<br />
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
<div style="clear:both></div> //MY ADDITION
</div>
</div>
</div>
<br />
</body>
What you want to do is use a clearfix solution on your .field1 divs: https://stackoverflow.com/a/1633170/1778054
In essence, add this to your CSS:
/* For modern browsers */
.field1:before,
.field1:after {
content:"";
display:table;
}
.field1:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.field1 {
zoom:1;
}
If you take the float:left; off the .examplefloat (used on the images) class it will fix the margin issue.