I'm creating a Wordpress theme from scratch, and so far everything's going well (it's my first time). However, underneath the admin bar I have 18 pixels of whitespace that wasn't in my static HTML page before Wordpress-ing it up. See below for a screenshot:
The blue part is the header, which should be flush with the admin bar. Is there any obvious reason for this happening?
I've had a similar thing happen, and I believe your issue is white space in your html. Go through and remove any extra spaces which may be rendering, especially before (or after) your <?php ?> tags.
maybe you could give us some more css. That could have thousands of reasons. If you dont work with firebug or other developer tools you should defenitley check that out. With this tools you can click at the place with the css element you want to see and see the attributes...
https://addons.mozilla.org/de/firefox/addon/firebug/
or click at chrome on the preferences of the browser...than "tools" and then "developer tools"
If you don't find the answer with this tools, post us some css from your stylesheet
We're short on information here. We need to see your CSS for an accurate answer.
Either way, if you log out, is the margin still there? I'm pretty sure it is. I actually think you're having a margin-top or padding-top on your container/header/whatever element is on top.
If there is no margin, then your CSS is probably interfering with the admin bar. You probably set a margin-bottom on an element that matches either your class, tag or structure of the admin bar.
If you still don't see anything, there is a very slim chance that it could be browser-related. If the other solutions didn't work, try adding a CSS reset.
Related
I have a fairly far-out box model for my portfolio website. It's actually really not but it required a little CSS magic to get the chamfer corners to work (I really wonder why chamfer corners do not exist in CSS). See it here.
Now, if you're on Firefox, and you navigate to my resume, you'll see a very mysterious margin going on at the top that I just can't seem to figure out. I was wondering if anyone could poke around with the Firefox dev tools and possibly figure out where this is coming from because I can't seem to figure it out. You may also notice a few other little graphical glitches on Firefox that are not present in any other browser, but hey, what can I say, I like that box look and I ain't gonna compromise.
Image depiction (from FF7.0.1, win7):
Add display: inline-block; to .box_content.
Not sure whats causing it but that should fix it. At least it did on my computer.
Validate your html for that list of errors that needs fixing. Then validate your CSS. I didn't run through that.
I rebuilt the "resume" section from the ground up. During this process I noticed a lot of margins being added to titles and such before I would edit the CSS classes that weren't added in other browsers. Margins seem to affect the "height=100%" rule as anyone whose tried to get a footer to stick to the bottom of their webpages might have figured out. So I chalk this one up to one of the titles getting a margin from one of Firefox's standard CSS stylesheets, I just couldn't find it.
Lesson of the day: ALWAYS set padding and margin to 0 for any custom class or id!
I really like what this website has done with their CSS layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.
Site: http://www.fssjax.org
Thanks
Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).
After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.
Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.
Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.
Inspect an element, look at the css then Google to find out what the css does if you aren't sure.
Well ok, it's kind of a crap navigation though...
Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.
And like the others said, use Firebug to figure out what everything is doing.
I have this CSS Menu. It's fully functional.
But when I put it in my page inside some table cell, it blows up like this. Don't mind the silver and the blue lines, they are from the page.
Now I have debugged the page and the menu itself. No error still this weird behavior. Then I got another menu and put that in here and it showed the same error. Any idea why is this happening?
I could paste the code but I don't think anybody is going to go through 500 lines of HTML and 100 lines of CSS.
I am using the latest Firefox. IE6 shows the same behavior.
check the code here...
CSS Menu Independent in a page
CSS Menu Inside a complex page
Your "in-place" stylesheet is much longer than your "minimum" one, and contains rules that are changing the layout. In particular, do a search for "280" -- you're setting some widths to that.
In some browsers, tables get some default styles that are not what you expect. I can't recall right now, but I think one of them was align="centre" by default.
Maybe try setting the table attributes to what you want them to be explicitly?
W3Schools for table attributes.
I have a simple textarea which works in all browsers i.e. I can click inside it and type.
But I can't do this with IE6! I am however, able to press the tab key until I get to the textarea and then I can type in it. But I cannot click it.
What a strange quirk? Anyone know what the hell is going on?!
The source of my form can been found here.
Thanks all for any help
Update
Here is the CSS. Nothing jumps out at me.
Update 2
Annoying, I have narrowed down the problem to this line:
background-image:url(../../images/checkout_fuzzy.png);
I use this setup for all my sites pages, but this is the first page that has text areas in it so I guess that might be the reason why it doesn't like the above. What possible could I change the above to so that it doesn't overlay the textarea.
Solved
A position:relative on the containing div solved my IE6 problem! The problem was that the text area was not clickable due to something (div) covering the textareas as identified by Chris.
I don't know what's going on but I have some thoughts that may or may not be the problem. I would hazard a guess that it might be stylesheet related. Its possible in HTML to have something invisible in front of a form element that stops it receiving a click but I would think that wouldn't stop the input getting tabbed to.
To test if this is the case see if you get the same problem if you don't reference your stylesheet at all. If this allows you to click its something to do with your CSS/layout. If you still can't click then I'd probably try turning javascript off on your browser and seeing what difference that makes...
The HTML looks totally fine to me at a glance but I of course can't see what your CSS and/or javascript might be doing on the page. Best of luck. :)
Not 100% sure if this will fix it, but try setting the 'cols' attribute in the textarea.
Here's an example.
<textarea rows="2" cols="20"></textarea>
IE6 can be a bit fidgety if it doesn't get what it expects.
I don't have a copy of ie6 handy but I do know that ie6 can get real funky with absolute and relative positioning. try commenting out your absolutely and relatively positioned CSS styles and see if any of them are covering your form.
I am attempting to make a dropdown menu - in CSS only - that drops down on mouse-click (instead of on mouse-hover) and has a scroll bar, as there will be around 22 options. What I have so far, is here: http://fiddle.jshell.net/yobqsjb2/1/
(I am limited to CSS only, as Javascript, PHP, etc are blocked by the university. I also cannot use the select or options codes (IE: [select name='menu'] [option value='1']first item[/option]) in the HTML of the page, because the editor keeps stripping them out. I gather from looking online that the TinyMCE visual editor on WordPress is doing this, but unfortunately, I have no access to change it, so I need to work around the limitation.)
I've grabbed code from other sources to tweak, but I fully admit that I was more on the PC repair side of things a few years ago (career-changed and now migrating the company website in the new field) not a former programmer. A lot of what I'm seeing that is supposed to fix the problem for other users' code, I don't quite understand what they're doing well enough to apply it here...
I know the "on click" problem is with the a:hover and li:hover (vs a:active / li:active), but when I switch them, the menu goes away when the mouse hits it. I read that I needed a 'display:block;' somewhere in the code, but based on examples shown, I've put it in each code segment and in all of them... it doesn't seem to want to fix the problem.
In terms of the scroll bar, everything I keep finding is in Javascript or, in a few places saying that it can't be done for IE (ideally, it would work everywhere, or have an IE alternative that wouldn't look funky).
Are either or both of these things possible? I've figured out how to change the dropdown menu's size, color, borders, etc, just not these two items...
Thanks in advance
For the :focus to work, you'd need a tabindex for the element (li).
Fiddle: http://fiddle.jshell.net/yobqsjb2/3/