I made a site about Star Wars Canon timeline (with movies,tv shows, books and comics) and I have a slight problem.
Chrome/Opera/Vivaldi have different < br> tag heights compared to Firefox and it crushes my OCD.
Is there any way to make the site look the same way on Firefox as it does on Chrome/Opera/Vivaldi?
I am sorry if I am not made understood, here's a screenshot: http://i.imgur.com/XmT2M64.png
Yes, I have OCD as well and am verily frustrated by such imperfections.
You may style your <br> with CSS:
br {
line-height: 2rem;
height: 2rem;
}
or by in-line styling, as provided by #Raj Kumar in a previous answer:
<br style="line-height: 2rem; height: 2rem;" />
Try a snippet here:
<br style="line-height: 10px; height: 10px;">
<!-- I used 10px to emphasise the height. You can use !important, too, if your code is not obedient. See? It works.-->
If this does not work, what I'd advise you to do would be to completely omit the <br> tags and add either margin, padding, or invisible borders (border: 2px groove transparent;) to the elements you're seperating. Another not-so-neat way is to add transparent a div (div.class {background: transparent; width: 100%; height: 2px;}).
You might want to try to add / in your <br /> tag (just in case) (although most modern browsers already support <br>). Make sure you don't have any additional spaces in your code, too (just for neatness). Also try to import normalize.css or vanilla.css and check if it fixes the problem.
Thanks for letting me know about Vivaldi. Looks like a nice browser!
You can try normalize css below is link http://necolas.github.io/normalize.css/
It will solve other problems of cross browser problems
add styles for br It should work perfect check this
<br style="line-height:?px; height:?px" />
you may try with the
reset.css
normalize.css
vanilla.css
that allows to reset all or particular element as per your requirement.
Related
Hi I'm trying to have a word or group of word in a different color in a . This is the code I use:
<h2 class="text-blue">
We are a <span class="text-orange">photography & video production</span>
studio improving businesses & brand's image and helping them to achieve their goals
</h2>
css:
.text-blue{
color: #645f5f;
}
.text-orange{
color: #ff8400;
}
My problem is that somehow the orange text appears smaller than the rest and not on the same line. Can someone tell me what I do wrong? Thank you very muchscreenshot
That's a little strange...from what I can tell, span shouldn't really change the size of your text. I put it into Codepen as well, and I didn't really see any difference. However, if you really want to make sure, I recommend just manually adjusting the .text-orange class, so that the text is the same size as that of its parent class:
.text-orange{
color: #ff8400;
font-size: 100%;
}
Give that a try. Let me know if that works :)
Ok I solved it thanks to you J. Zhou
I changed the span by a p and added a display:inline into my class. Following is the code:
<h2 class="text-blue">We are a <p class="text-orange">photography & video production</p> studio improving businesses & brand's image and helping them to achieve their goals</h2>
css:
.text-orange{
color: #ff8400;
display:inline;
}
It's very likely that your span is being styled elsewhere, and it's receiving display: block - which is why it's breaking the line - and also a font-size. You can see it at the developer console.
If that's the case, then I highly suggest that you correct it instead of using another tag, because span is the most adequate tag for inline style exceptions.
If you wish to keep that style, try changing its selector, making it more specific, so it doesn't affect all your span tags.
just add the font-size you want like this:
.text-orange {
font-size: 100% !important;
}
this will undo any predefined styles and make font-size 100%;
similarly you can add more styles with !important;
"If my answer is correct then please mark my answer as the right answer-> it will help my profile thanks Read: stackoverflow.com/help/someone-answers"
Here is my site :
<span class="field-content"><div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
Arsenal
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/team_logo-2000x2000.png?itok=L_wkCsC6" width="150" height="150" alt="Arsenal logo" typeof="Image" class="image-style-logo-150x150">
</a></div><div class="versus-wraper">v</div><div class="field_away_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
West Brom
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/West_Bromwich_Albion.png?itok=vZlNXq8J" width="150" height="150" alt="West Bromwich Albion logo" typeof="Image" class="image-style-logo-150x150">
</a></div></span>
You can see 2 logo on top of site (div.field_home_team-wraper and .field_away_team-wraper), i want it stay in one line, so i set it width:50% and inline-block, so here is what i want to display:
But, sometime on PC browser and alway on iPhone browser, it will display like this :
I know there are white-space between two inline-block div, i removed it, you can look at source code to confirm. I don't know what problem here, please help.
I just inspected the code on your site and I can't recreate the issue you're describing above. However, I did notice that there are a few lines of code that chrome isn't agreeing with - maybe try and resolve some of those issues to see if it fixes the problem on your end.
My god, i solved this problem, just move div.versus-wraper to the last of span.field-content, everything become good.
But still don't know why it make a problem, still a mysterious with me. There are something to learn, if someone know, please answer.
Here is my question will more explain : Browser image render break css inline-block layout
This is a known bug.
Display: Inline-Blockcreates spaces between elements.
Here are two ways to fix this:
First way, if you use display: inline-block, always use margin-right: -4px to fix the spaces between elements.
Second way, use font-size: 0 on parent <div> to remove spaces, and on elements inside <div> reset the font again to the size you want. Example: font-size: 16px
And another tip, be sure to use Box-sizing: border-box, so whatever if you put borders or margin or padding, doesn't affect the width in percentage...
When I adjust the screen size , the orange line which is defined by a h1 tag doesn't move downwards with the text and also my orange boxes that i had floated to the right merge behind the text.
I know I need to include Media Queries somehow but no idea how, can anyone help me?
Thanks!
Ok, first of all I don't think I have ever seen anyone use as many breaks <br> tags on a single page as you have haha.
The answer to your question is to simply use the <hr> tag (horizontal rule), wherever you want a line.
For example after the closing div tag for timings add the <hr> tag. By default the <hr> tag is styled black so we need to add some simple styling to your stylesheet.css
hr {
border-top: 1px solid #bd6e22;
}
If you wanting to add spacing above, below or even both then add this to the styling.
hr {
border-top: 1px solid #bd6e22;
margin: 20px 0;
}
I have put 20px for an example but you can change that to what ever you want.
Hope this helps.
Ok you need to open up http://me14evb.leedsnewmedia.net/slate/stylesheet.css in a ftp client.
then https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ use the #media quieres for each page break size and adjust the style's accoridng to each device :D
good luck!
Chris
Ho do i achieve the grey underline in the welcome part of the website? I forgot the tag, it basically creates a line all the way across the page/div/table whatever you want.
The website(where it says welcome to CLAN):
It's called a Horizontal Rule:
<hr>
And it looks like this:
You can also style it using CSS (as Stack Overflow have done), something like this:
hr {
color: red;
background-color: red;
height: 2px;
}
the tag you are looking for is an: <hr>
<hr>
You can use 4 attributes, that are not supported in HTML5.
align
noshade
size
width
I use this on my website: means 99% of screen-width and size 1.
<hr noshade size=1 width="99%">
Please read the articles below to understand you problem:
http://dev.w3.org/html5/markup/hr.html
http://www.w3schools.com/tags/tag_hr.asp
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.